How To Toggle Div Elements Using jQuery?

This tutorial explains us how to create a toggle effect using jQuery and HTML Div tag. We see simple toggles, animated toggle and slide out toggles on Div element.

As a web designer, while designing our websites we always require some hide and show methods to be enabled for the elements on our pages. The best would be to do it on <div> tags as that is one of the most used element. We will try to toggle the div elements on a click trigger using the mouse.

If you go through my blog, you can get some of my previous tutorials explaining how to show or hide elements.

Here are the previous tutorials before we proceed:

1. Show and hide elements for Blogger v1.0
2. Show and hide elements for Blogger v2.0
3. Show and hide elements for Blogger v3.0

Those were the previous tutorial which taught us how to toggle elements using CSS alone for Blogger platform. We can always try them on any website or blog.

Today, we are going to touch upon the usage of jQuery to toggle the div elements.

The tutorial has 3 types of toggle effects :

1. Simple toggle effect
2. Animated toggle effect
3. Slide-out animated toggle effect

Before going ahead, check out the demo:

Tutorials to hide or show div elements on a click:

Toggle Type 1: Simple toggle <div> tag

jQuery and JavaScript:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type='text/javascript'>
function toggleDivs(divs) {
   $("#"+divs).toggle();
}
</script>

HTML Markup:

<a href="javascript:toggleDivs('showHideDiv');" style="background-color: #666960; padding: 5px 10px;">Toggle Button</a><br />
<div id="showHideDiv" style="background-color: #666960; padding: 5px 10px;">
This Content Shows and Hides When Toggle Button Pressed!!!!!!
</div>

Explanation:
jQuery does most of the effects on all the examples. We just use a simple JavaScript which uses the toggle() function to toggle on a click.

Toggle Type 2: Animated Toggle on Div Elements

jQuery and JavaScript:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type='text/javascript'>

function oneatatime(thechosenone) {
     $('div[name|="box"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(300);
          }
          else {
               $(this).hide(700);
          }
     });
}
</script>

HTML Markup:

<table>
   <tbody>
<tr>
      <td><div class="boxes" style="color: white;">
<a href="javascript:oneatatime('box1');">Show First One</a>
         </div>
<div id="box1" name="box" style="background-color: #691c4a; border: 1px solid #0b6907; color: white; display: block; padding: 5px; width: 150px;">
Div Element 1</div>
</td>
      <td><div class="boxes">
<a href="javascript:oneatatime('box2');">Show Second One</a>
         </div>
<div id="box2" name="box" style="background-color: #691c4a; border: 1px solid #0b6907; color: white; display: none; padding: 5px; width: 150px;">
Div Element 2</div>
</td>
      <td><div class="boxes">
<a href="javascript:oneatatime('box3');">Show Third One</a>
         </div>
<div id="box3" name="box" style="background-color: #691c4a; border: 1px solid #0b6907; color: white; display: none; padding: 5px; width: 150px;">
Div Element 3</div>
</td>
   </tr>
</tbody></table>

CSS:
table {
  border-collapse: collapse;
}
div, td {
  vertical-align: top;
  padding: 2px 4px;
}
a:link{color:white; text-decoration:none;}
.boxes{
background-color: #696363;
border: 1px solid #0b6907;
padding: 5px;
width: 150px;
font-color: #fff;
}

Explanation:
In the second method, we use the show() and hide() method in the JavaScript to toggle the elements. We show only one Div element at one time. Here, we have created a table to line up the Divs. You can always replace it by lists.

Toggle Type 3: Slide-out Animated Toggle Div Element

jQuery and JavaScript:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type='text/javascript'>

function slideone(thechosenone) {
     $('div[name|="box2"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(300);
          }
          else {
               $(this).slideUp(700);
          }
     });
}
</script>

HTML Markup:

<table>
<tbody>
<tr>
<td><div class="boxes">
<a href="javascript:slideone('b1');">Slide 1</a>
         </div>
<div id="b1" name="box2" style="background-color: #3d692f; border: 1px solid #156918; color: white; display: block; padding: 5px;">
Div Element 1</div>
</td>
<td><div class="boxes">
<a href="javascript:slideone('b2');">Slide 2</a>
         </div>
<div id="b2" name="box2" style="background-color: #394469; border: 1px solid #156918; color: white; display: none; padding: 5px;">
Div Element 2</div>
</td>
<td><div class="boxes">
<a href="javascript:slideone('b3');">Slide 3</a>
         </div>
<div id="b3" name="box2" style="background-color: #69253e; border: 1px solid #156918; color: white; display: none; padding: 5px;">
Div Element 3</div>
</td>
<td><div class="boxes">
<a href="javascript:slideone('b4');">Slide 4</a>
         </div>
<div id="b4" name="box2" style="background-color: #516962; border: 1px solid #156918; color: white; display: none; padding: 5px;">
Div Element 3</div>
</td>
</tr>
</tbody></table>

CSS:
table {
  border-collapse: collapse;
}
div, td {
  vertical-align: top;
  padding: 2px 4px;
}
a:link{color:white; text-decoration:none;}
.boxes{
background-color: #696363;
border: 1px solid #0b6907;
padding: 5px;
width: 150px;
font-color: #fff;
}

Explanation:
In the third method, we animate a little for the Div elements by using the slide slideDown() and slideUp() methods in the JavaScript. Rest of the magic is done using jQuery for us. Rest of the structure is same as the second method of toggling.

Hope you enjoyed trying out this tutorial on your blog and website. Thanks for peeping in. Stay tuned for more such tutorials. Have a great time.

~iTechColumn