Displaying and hiding content when div with a certain class or id is clicked

Question

I have a 4 divs that are stacked on top of each other. When I click on a given div, I want it to show a content section below it and above the other three divs. When I click the div again, it should hide the content section associated with it. My current code is able to display the content on click but I can't find anything on how to hide that content when I click on the div again.

Here is my code for example

HTML

                <div class="dropItem wow fadeInLeft">Nature <b class="caret"></b></div>
                <div id="show">
                    <p>Some text here</p>
                </div>

                <div class="dropItem2 wow fadeInLeft">Discovery <b class="caret"></b></div>
                <div id="show2">
                    <p>Some text here</p>
                </div>

                <div class="dropItem3 wow fadeInLeft">Perspective <b class="caret"></b></div>
                <div id="show3">
                    <p>Some text here</p>
                </div>

                <div class="dropItem4 wow fadeInLeft">Mindfullness <b class="caret"></b></div>
                <div id="show4">
                    <p>Some text here</p>
                </div>

            </div>
        </div><!--end about column-->

Javascript

$(document).ready(function(){
    //hide content sections at first
    $("#show").hide();
    $("#show2").hide();
    $("#show3").hide();
   $("#show4").hide();

 //display each content section when corresponding div is clicked
    $(".dropItem").click(function(){
        $("#show").show();
    });

    $(".dropItem2").click(function(){
       $("#show2").show();
    });

    $(".dropItem3").click(function(){
        $("#show3").show();
     });

     $(".dropItem4").click(function(){
         $("#show4").show();
      });

});

CSS

.dropItem, .dropItem2, .dropItem3, .dropItem4 {
 width: 100%;
 height: 25%;
 padding-top: 4%;
 text-align: center;
 border-top: 1px solid #000;
 font-weight: bold;
}

.caret {
 color: teal;
}

#show, #show2, #show3, #show4 {
 width: 100%;
 height: 250px;
 background-color: teal;
 color: #FFFFFF;
 border: 1px solid teal;
}

Link to site for example http://jackloudphoto.com/

Answer 1

You can do this with this three solutions.

First of all, good idea is wrap it into one div as box, because you need define item borders.

Solution one

I like this because no matter how much deep is content div inside in box. If you change box structure eg. you don't need to change your js code because everything will work.

HTML

<!-- solution one -->
<div class="box">
  <div class="box-header dropItem wow fadeInLeft">Nature <b class="caret"></b>
  <div class="box-content">
    <p>Some text here</p>
  </div>
</div>

JS

// solution one
$('.box .box-header').click(function(e) {
    $(this).closest('.box').find('.box-content').toggle();
});

Solution two

It is similar to your code. You need get ID what you want to show. For this is perfect use HTML5 Data attribute like in example. But if you need to change your structure, you probably will need change js code too.

HTML

<!-- solution two -->
<div class="box2">
  <div class="box-header2 dropItem wow fadeInLeft" data-box-id="2">Nature <b class="caret"></b>
  <div class="box-content2 item-2">
    <p>Some text here 222</p>
  </div>
</div>

JS

// solution two
$('.box2 .box-header2').click(function(e) {
    var id = $(this).data('box-id');
  $('.item-'+id).toggle();
});

Solution three

Is solution one without short toggle function.

HTML

<!-- solution three -->
<div class="box3">
  <div class="box-header3 dropItem wow fadeInLeft">Nature <b class="caret"></b>
  <div class="box-content3 item-3">
    <p>Some text here 3333</p>
  </div>
</div>

JS

$('.box3 .box-header3').click(function(e) {
    var $content = $(this).closest('.box3').find('.box-content3');
  if($content.is(':hidden')) {
    $content.show();
  }
  else {
    $content.hide();
  }
});

I prefer the solution one but sometimes use solution two. Depend what is frendly for you.

JS DEMO

Answer 2

Fast and easy answer:

var one = -1,
    two = -1,
    three = -1,
    four = -1;


     //hide content sections at first
     $("#show").hide();
     $("#show2").hide();
     $("#show3").hide();
     $("#show4").hide();

     //display each content section when corresponding div is clicked
     $(".dropItem").click(function(){
         if(one == -1)
         $("#show").show();
         else
          $("#show").hide();

          one *= -1;
     });

     $(".dropItem2").click(function(){
        if(two == -1)
         $("#show2").show();
         else
          $("#show2").hide();

          two *= -1;
     });

     $(".dropItem3").click(function(){
         if(three == -1)
         $("#show3").show();
         else
          $("#show3").hide();

          three *= -1;
     });

     $(".dropItem4").click(function(){
         if(four == -1)
         $("#show4").show();
         else
          $("#show4").hide();

          four *= -1;
     });