CODEWITHSUNDEEP
javascriptjquery
user4017388
user4017388

Reputation:

show hide div jQuery

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.

Upvotes: 1

Views: 9063

Answers (3)

chrana
chrana

Reputation: 209

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

        });

    });

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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/

Upvotes: 5

artur99
artur99

Reputation: 818

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/

Upvotes: -1

Related Questions