Jquery Click to hide/show div not working

Question

Need to use one single button to toggle the show and hide for div my code looks something like this

function showTable(number){
 $('#div_'+number).show('slow');
 $('#button_'+number).html("Hide Table").click(function(){
 hideTable(number);
 return false;
 });
}

function hideTable(number){
 $('#div_'+number).hide('slow');
 $('#button_'+number).html("Show Table").click(function(){
 showTable(number);
 return false;
 });
}

<div id="div_1" style="display:none"></div>
<button id="button_1" onClick="javascript:showTable(1)">Show Table</button>
<div id="div_2" style="display:none"></div>
<button id="button_2" onClick="javascript:showTable(2)">Show Table</button>
<div id="div_1" style="display:none"></div>
<button id="button_3" onClick="javascript:showTable(3)">Show Table</button>

The function is working fine at first. But after i show and hide it once, whenever I tried to show it again, it starts chaining show/hide/show/hide by itself without any clicks. And the more I do it, the longer it does the chaining. It seems it's just a loop that everytime it doubles the amount of looping(like show/hide for 2/4/8/16/32 times ....) the more I do the longer it loops. Anyone have a clue what's going on?

I tried to remove the click part in the hideTable function, the loop stops but still whenever I try to hit showTable, it will show then hide it self automatically like it's auto executing the stuff in the click function without any clicks...

Also is there anyway to use the jquery tagging style to call the function instead of using onclick? i know I can do like

$("#button_1").click(function(){......................});
$("#button_2").click(function(){......................});
$("#button_3").click(function(){......................});

but is there anyway I can group all of them together into a single function and still able to tell which button is clicked? Because I need a way to track which div to show and hide, and change the the text in corresponding button. Thank you very much in advance. m(_ _)m

Answer 1

You're piling on more and more redundant event handlers with each "click". That's what those calls to ".click()" in the handlers do — add another event handler.

You only need to add an event handler once. And adding an event handler does not remove the prior handler. Since you're using jQuery, use it to add the handlers, not old-fashioned "onclick" attributes.

Give all those <div> elements a class value, like "toggled".

<div id="div_1" style="display:none" class='toggled'>

You can do the same with the buttons. Then you can set up event handlers by using the class to refer to them in a jQuery selector.

Answer 2

A better way to do this is with toggle. Refer to JQuery toggle showhide

Answer 3

you should gove all your divs the same class eg class="toggleable" on the ones you want to toggle.

Then try:

jQuery(".toggleable input[type='button']").click(function()
{
    jQuery(this).closest("div.toggleable").toggle();
});

This will put an onlick on your buttons inside your div which will find the closest parent div with class toggleable and will either hide/show your div.

• To read about toggle() : http://api.jquery.com/toggle/
• to read about selectors: http://api.jquery.com/category/selectors/

Answer 4

I agree with Pointy but since I can't seem to add onto the answer, I must make another.

$('[data-show-table]').click(function() {
   var $this_button = $(this);

   $('#div_' + $(this).attr('data-show-table')).toggle(function() {
       var msg = $(this).css('display') == 'none' ? 'Show table' : 'Hide table';
       $this_button.html(msg);
   });

});


<div id="div_1" style="display:none">Table 1</div>
<button id="button_1" data-show-table="1">Show Table</button>

<div id="div_2" style="display:none">Table 2</div>
<button id="button_2" data-show-table="2">Show Table</button>

<div id="div_3" style="display:none">Table 3</div>
<button id="button_3" data-show-table="3">Show Table</button>