Creating a Multi Div Toggle Content in Blog Posts

You can hide the content div, jquery serves to open the content in a div and will close another div div when opened. And of course, this jquery div can close itself without having to click another div.

DEMO

CSS code

.dropdown-container{display:none; width:100%;padding:0;margin:0 auto;}
.dropdown-content{padding:10px;margin:0 auto;background-color:#ccc;}
.dropdown-button{background-color:#ddd; width:100%;cursor:pointer;margin:0 auto;padding:5px 0}
.dropdown-button span{padding:10px}

Javascript Code

$(document).ready(function(){
    $(".dropdown-button").click(function(e) {
      e.preventDefault();
      var $div = $(this).next('.dropdown-container');
      $(".dropdown-container").not($div).slideUp();
        if ($div.is(":visible")) {
            $div.slideUp();
        }  else {
           $div.slideDown();
        }
    });
    $(document).click(function(e){
        var p = $(e.target).closest('.dropdown').length
        if (!p) {
              $(".dropdown-container").slideUp();
        }
    });
});

HTML Code

HTML code is to be stored in the post when it would make the show hide content. We can make more than one show hide content that interacts with this

<div class="dropdown">
    <div class="dropdown-button"><span>TITLE TOMBOL DI SINI</span></div>
  <div class="dropdown-container">
      <div class="dropdown-content">CONTENT DI SINI</div>
  </div>
</div>

Author: Adhy Suriady

See the Pen Creating a Multi Div Toggle Content in Blog Posts by ducnguyen (@ducrat) on CodePen.