Question

I have result page from DB, on each row I have show/hide button that should show/hide container with $title….

I tried with jquery but it wont work 🙁

<div class="container">
 <div class="show_hide_button_<? echo $article_id_tmp; ?>"><a href="#">show/hide</a></div>
    <div class="show_hide_container_<? echo $article_id_tmp; ?>">
</div>
</div>



<script type="text/javascript">
var div_id = '$article_id_tmp';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $('div_id_b').click(function(){
     $('div_id_c').toggle();     
  });
});

thank you

Answer 1

Your variables are variables, not strings, so you shouldn’t be enclosing them within spaces:

var div_id = '$article_id_tmp';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $(div_id_b).click(function(){
     $(div_id_c).toggle();     
  });
});

Furthermore, you need to echo the $article_id_tmp in the JS:

var div_id = '<?php echo $article_id_tmp ?>';

div_id_b+='.show_hide_button_'+ 'div_id';
div_id_c+='.show_hide_container_'+ 'div_id';

$(function(){
  $(div_id_b).click(function(){
     $(div_id_c).toggle();     
  });
});

Additionally, classes are usually used to group similar elements on a page; however you’re assigning different classes to every element. For consistency, you might want to consider using an “id” instead of a class, or more preferably, something like the following:

<div class="container">
   <div class="show_hide_button"><a href="#">show/hide</a></div>
   <div class="container">
   </div>
</div>

$('.show_hide_button').click(function () {
    $(this).next('.container').toggle();
});

You can of course, remove the container class, and just use $(this).next().toggle()