javascript - Changing Text and Hiding a table -
i want use div "link" in way when div clicked toggles table's visibility , div's text changes. can table toggle upon click, can't text in div change based upon table's visibility.
here code:
$(document).ready(function () { $('.details td').hide(); $('#link').click(function () { $('.details td').toggle(); if (('.details td').is(':hidden')) { $('#link').text('click more detail'); } else { $('#link').text('click hide details'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="link" style="color: blue">click more detail</div> <div class="details"> <table class="details"> <tr> <td>details</td> </tr> <tr> <td>more details</td> </tr> </table> </div>
missing $
here,
if (('.details td').is(':hidden')) { ////^
you have fixed seeing console itself. anyway here demo.
also can optimize code below,
$(document).ready(function () { var details = $('.details td').hide(); $('#link').click(function () { details.toggle(); $(this).text($('.details td').is(':hidden') ? 'click more detail' : 'click hide details'); }); });
Comments
Post a Comment