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

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -