CODEWITHSUNDEEP
jqueryvariablestoggle
InTry
InTry

Reputation: 1169

jquery toggle "variable" div

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

Upvotes: 1

Views: 2110

Answers (4)

andyb
andyb

Reputation: 43823

The JavaScript code needs to have the PHP variable correctly output, as you have already done in the HTML. So you need to change:

var div_id = '$article_id_tmp';

to

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

This requires that the <script> be output inline as in your question. The JavaScript cannot exist in this form in a separate file.

And as @Matt has answered, the div_id is a variable, and should not be quoted when concatenating together when assigning to the div_id_b and div_id_c variables. The assignment should be:

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

And lastly the jQuery selectors do not require quoting, since they are variables already. The existing code will be looking for an element called div_id_b which does not exist.

The correct selectors should be $(div_id_b).click(...) and $(div_id_c).toggle();

Upvotes: 1

Samich
Samich

Reputation: 30145

Maybe you need to simplify you markup. Use some classes to mark the show/hide button and some classes to you content container. And the script will be very small and understandable:

$('.container .show_hide_button a').click(function() {
    $(this).parent().siblings('.show_hide_container').toggle();
});

Live demo: http://jsfiddle.net/gYkKz/4/

Upvotes: 1

Kahlil Lechelt
Kahlil Lechelt

Reputation: 564

To me it looks like you would have to write

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

instead of 

var div_id = '$article_id_tmp';

So that you are actually feeding in the right string. Otherwise div_id will always be the string '$article_id_tmp'

Upvotes: 1

Matt
Matt

Reputation: 75327

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()

Upvotes: 1

Related Questions