javascript - jQuery toggle on PHP foreach loop -


using codeigniter 3.x

i'm trying data database using foreach loop.

<h3 style="margin-right:15px;" id='hideshow'>august 2016</h3> <?php foreach($duxeos $e): ?> <div class='content' ><h4 class="dropdate"><?php echo $e->fulldate;?></h4><div class="cdropdate" class="defhide"><?php echo $e->content;?></div></div> <?php endforeach; ?> 

javascript :

  jquery(document).ready(function(){       jquery('.hideshow').live('click', function(event) {            jquery('.content').toggle('show');       });   });    jquery(document).ready(function(){       jquery('.dropdate').live('click', function(event) {            jquery('.cdropdate').toggle('show');       });   }); 

now it's working, when press hide button, hide content, how can hide content want ?

  • use this context in handler-function
  • use .on instead of .live
  • use .closest closest element in order find child of it.

jquery(document).ready(function() {    jquery('.dropdate').on('click', function(event) {      jquery(this).closest('.content').find('.cdropdate').toggle();    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <h3 style="margin-right:15px;" id='hideshow'>august 2016</h3>  <div class='content'>    <h4 class="dropdate">full-date</h4>    <div class="cdropdate defhide">content</div>  </div>  <hr>  <div class='content'>    <h4 class="dropdate">full-date</h4>    <div class="cdropdate defhide">content</div>  </div>


Comments