Sayuj3 Sayuj3 - 15 days ago 5
HTML Question

Unique Div not slideToggling on specific icon click

Here is the html code of the clicking icon:

<a href="javascript:void(0)" class="stat-item remark" id='id' rel='msg_id' title='Give your Remarks on it'>
<i class="fa fa-comments-o icon"></i>
</a>


Here is the html for the div to load

<div class="post-footer" id="post-footer">
<p>Loading the list</p>
</div>


Here is the jQuery which i use

$(document).ready(function(){
$(".stat-item.remark").on("click", function( e ) {
$(".post-footer").slideToggle();
});
});


My project consists of displaying several divs(extraction from db using php's
fetcharray
loop function)with different contents inside it. But the post-footer class of the div is same in every div i could see,the icon . My problem is when i click the icon i can all the class named 'post-footer' is slideToggling. How can i make them slideToggle independently with each icon click(class="stat-item remark") ?

Answer

Use data-* attributes by storing data-id of the related post-footer in your links like:

<a href="" class="stat-item remark" data-msg-id="<?php echo $omsg_id;?>" title='Give your Remarks on it'>
  <i class="fa fa-comments-o icon"></i>
</a>  

<div class="post-footer" id="post-footer-<?php echo $omsg_id;?>">
  <p>Loading the list</p>
</div>

Then on click get the data-id attribute and target the related post_footer :

$(document).ready(function(){
  $(".stat-item.remark").on("click", function( e ) 
  {
      e.preventDefault();

      var post_footer_id = "#post-footer-"+$(this).data('msg-id');

      $(post_footer_id).slideToggle();
  });
});

Hope this helps.

$(document).ready(function(){
  $(".stat-item.remark").on("click", function( e ) {
    var post_footer_id = "#post-footer-"+$(this).data('id');
    $(post_footer_id).css({backgroundColor: 'yellow'});
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

<a href="javascript:void(0)" class="stat-item remark" data-id='1' title='Give your Remarks on it'>
  <i class="fa fa-comments-o icon"></i>
</a>  
<div class="post-footer" id="post-footer-1">
  <p>Loading the list</p>
</div>

<a href="javascript:void(0)" class="stat-item remark" data-id='2' title='Give your Remarks on it'>
  <i class="fa fa-comments-o icon"></i>
</a>  
<div class="post-footer" id="post-footer-2">
  <p>Loading the list</p>
</div>

<a href="javascript:void(0)" class="stat-item remark" data-id='3' title='Give your Remarks on it'>
  <i class="fa fa-comments-o icon"></i>
</a>  
<div class="post-footer" id="post-footer-3">
  <p>Loading the list</p>
</div>