Show and hide multiple div using Jquery

A lot of people are in search of this script of show and hide multiple div with Jquery. Jquery is a well known script for creating the user interface. Although the small and customized script is enough for consequence your efforts, but you will need to implement some additional library also.

Today you will learn here the entire process that can be used for showing and hide multiple div using Jquery. This blog also includes the live example. You can see the demo or try it with try it editor.

Hello, I’m Container one

Download This Script

You will required the following skills to use this script

  • Jquery
  • HTML
  • CSS

So let’s start with the HTML file, Your HTML file should look something like this

<div class="buttons">
  <a class="button" id="showdiv1">Menu 1</a>
  <a class="button" id="showdiv2">Menu 2</a>
  <a class="button" id="showdiv3">Menu 3</a>
  <a class="button" id="showdiv4">Menu 4</a>
</div>

<div id="div1">Hello, I'm Container one</div>
<div id="div2" style="display:none;">Hello, I'm Container two</div>
<div id="div3" style="display:none;">Hello, I'm Container three</div>
<div id="div4" style="display:none;">Hello, I'm Container four</div>

Download


Now, you have gone through the HTML file. Now you will have to write a small script of Jquery, which will be used to show and hide the multiple divs. You will also need to call a library for proper working of your written script. Your Jquery script will look like this.

$(function() {
    $('#showdiv1').click(function() {
        $('div[id^=div]').hide();
        $('#div1').show();
    });
    $('#showdiv2').click(function() {
        $('div[id^=div]').hide();
        $('#div2').show();
    });

    $('#showdiv3').click(function() {
        $('div[id^=div]').hide();
        $('#div3').show();
    });

    $('#showdiv4').click(function() {
        $('div[id^=div]').hide();
        $('#div4').show();
    });

})

Download


Now this script will work for simple show and hide div or toggle div. There is no additional action required for this. But If you want to implement some style on it, you can add some CSS also. Below I’m going to show the style that can be used for this.

.main_div
  {
  text-align:center;
  background: #00C492;
  padding:20px; width: 400px;
  }
.inner_div
  {
  background: #fff;
  margin-top:20px;
  height: 100px;
  }
.buttons a
  {
  font-size: 16px;
  }
.buttons a:hover
  {
  cursor:pointer;
  font-size: 16px;
  }

Download


That’s all done now. Now the example will work properly for toggling of divs using Jquery. If you still have any issue with toggle div or show hide div using Jquery, you can leave a comment below in the commentbox and I will get back to you.



  • Andy

    Hi, thanks for the script. Is this a google-conform technique? Will this work well in terms of SEO?

  • http://www.html5andcss3.org/ swapnil raja

    Yes, This is the google conform technique

  • Aditya

    Thanks for the uncomplicated code…..

  • Aditya

    Hi Swapnil,
    If i have more than 30 divs then the code seem to get longer. Can you provide an alternate code for this. Sorry i am an absolute rookie in this. Thanks in advance.

  • subi

    hi Sawpnil,
    thanks for the code it simple to get…

  • Abid

    Hi Swapnil
    Thanks for this module

  • Ben

    Hi. it works perfectly! But how can i link directly to one of the divs from another page?? Thanks

  • Ryanwordsworth

    Hi! Thanks for this simplified code.

Show Buttons
Hide Buttons