1

I am trying to make a show hide div function for my website. But I have one problem with multiple show hide button. So the problem is that when I click show button in container div then all blue div showing automatically.

You can see a DEMO.

HTML:

<div class="container"> <div class="div"> <div id="hidediv">Hide</div> </div> <div class="test"></div> <div id="showdiv">Show</div> </div> <div class="container"> <div class="div"> <div id="hidediv">Hide</div> </div> <div class="test"></div> <div id="showdiv">Show</div> </div>

JavaScript:

$(document).ready(function() { $("#hidediv").hide(); $('#showdiv').click(function() { $('.div').toggle("slide"); $("#showdiv").hide(); $("#hidediv").show(); }); $('#hidediv').click(function() { $('.div').toggle("slide"); $("#hidediv").hide(); $("#showdiv").show(); }); });

When the user clicks show button in container show div, then I only want to show this div. I hope you can understand me.

Improve this question
6
  • 2
    A valid HTML page will never had a duplicated ID... Make different IDs and Functions for each container Commented Sep 7, 2014 at 21:01
  • 1
    @artur99 I do not know how to do it. Please could you help. Commented Sep 7, 2014 at 21:02
  • And use .siblings and similar jQ methonds to reach certain elements. Commented Sep 7, 2014 at 21:03
  • You can use classes instead of IDs, huh? Commented Sep 7, 2014 at 21:03
  • Use classes instead with child parent css method. Commented Sep 7, 2014 at 21:03

3 Answers 3

Reset to default
5

First of all you should use classes instead of id. Fixed HTML becomes:

<div class="container"> <div class="div"> <div class="hidediv">Hide</div> </div> <div class="test"></div> <div class="showdiv">Show</div> </div>

and so on. This is the most flexible approach, because now you can add as many collapsible containers as you need without need to change JS code.

Javascript code then can be (with on method for more effective event handling):

$('.container').on('click', '.showdiv', function(e) { var $container = e.delegateTarget; $('.div', $container).toggle('slide'); $('.showdiv', $container).hide(); $('.hidediv', $container).show(); }) .on('click', '.hidediv', function(e) { var $container = e.delegateTarget; $('.div', $container).toggle("slide"); $(".hidediv", $container).hide(); $(".showdiv", $container).show(); });

Demo: http://jsfiddle.net/1j32cwLg/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

why classes instead of ids?
@DustinAngeletti ids needs to be unique. With classes this code is way more flexible (you can add more containers, etc.)
0

Different ids is a good option but if you really don't want that or maybe there are lots of divs use the following:

HTML

<div class="container"> <div class="hidediv">Hide</div> <div class="showdiv">Show</div> </div> <br /> <div class="container"> <div class="hidediv">Hide</div> <div class="showdiv">Show</div> </div>

JavaScript

 $(document).ready(function() { $(".hidediv").hide(); $('.showdiv').click(function() { $(this).hide(); $(this).parent(".container").children(".hidediv").show(); }); $('.hidediv').click(function() { $(this).hide(); $(this).parent(".container").children(".showdiv").show(); }); });
Improve this answer

1 Comment

Thank you for a different answer.
-1

Make different IDs and Functions for each container like this:

HTML:

<div class="container"> <div class="div"> <div id="hidediv">Hide</div> </div> <div class="test"></div> <div id="showdiv">Show</div> </div> <div class="container2"> <div class="div2"> <div id="hidediv2">Hide</div> </div> <div class="test2"></div> <div id="showdiv2">Show</div> </div>

JS:

 $(document).ready(function() { //function for first container $("#hidediv").hide(); $('#showdiv').click(function() { $('.div').toggle("slide"); $("#showdiv").hide(); $("#hidediv").show(); }); $('#hidediv').click(function() { $('.div').toggle("slide"); $("#hidediv").hide(); $("#showdiv").show(); }); //for second container $("#hidediv2").hide(); $('#showdiv2').click(function() { $('.div2').toggle("slide"); $("#showdiv2").hide(); $("#hidediv2").show(); }); $('#hidediv2').click(function() { $('.div2').toggle("slide"); $("#hidediv2").hide(); $("#showdiv2").show(); }); });

CSS:

.container, .container2 { margin-top:40px; width:630px; height:190px; margin:0px auto; border:1px solid #d8dbdf; } .test,.test2 { float:left; width:250px; height:190px; background-color:red; } .div, .div2{ float:left; width:630px; height:190px; background-color:blue; display:none; position:absolute; } #hidediv, #hidediv2{ background:red; }

Exaple here: http://jsfiddle.net/usqeyckd/

Improve this answer

1 Comment

Thanks for your respond (I know this). But this is not solution. because of if .div will be twenty or fifty times what should i do on that time.