Random Snippets » Hide

How to hide, show, or toggle your div with jQuery

Allen Liu — Mon, 11 Apr 2011 04:58:21 +0000

Hiding and showing content is MUCH easier with the magic of jQuery. Here is a simple demo of the jQuery .toggle() function.

Demo

Toggle Button

The content in this div will hide and show (toggle) when the toggle is pressed.

Here is the JavaScript needed to run this demo:


<script type="text/javascript">
function toggleDiv(divId) {
   $("#"+divId).toggle();
}
script>

Line 1 simply loads the minimized jQuery v1.4.4 library. Once that is done, the rest is cake =) Line 3 defines the toggleDiv JavaScript function which takes one parameter: the id of the div to be toggled. Line 4 is where all the action takes place. The $("#"+divId) part is the powerful jQuery selector which selects the div that was passed to the function. I cannot say how easy jQuery makes it to select elements whether it is by id, class, or even by element types. Once our div is selected, we simply append jQuery’s toggle() function which automatically detects whether or not the content hidden and toggles it. On the HTML code level, the function toggles the display attribute between none and block.

Here is the raw HTML code for the demo:

Toggle Button

The content in this div will hide and show (toggle) when the toggle is pressed.

The a tag is styled to look like a button and the onclick event uses our toggleDiv which passes the ‘myContent’ div ID as the argument. The rest of the HTML basically codes for our ‘myContent’ div whose content will be toggled by a click of the a tag.

That is it! There is no more need to reinvent the wheel my friends.

Here is a new demo in response to a request where only one div is displayed at any one time.

Demo

show this one only

Div #1

show this one only

Here is the HTML code:


   
      
         
            show this one only
         
         Div #1
      
      
         
            show this one only
         
         Div #2
      
      
         
            show this one only
         
         Div #3

The HTML code contains 3 divs to start off with: 2 hidden and 1 displayed. Each link will launch the showonlyone JavaScript function and pass over the corresponding div ID.

function showonlyone(thechosenone) {
     $('div[name|="newboxes"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}

Line 2 contains some very cool uses of jQuery. Here we are looping through all divs with the name = "newboxes" which represents all 3 divs.

Line 3 checks to see if the div id in the current loop is equal to thechosenone which is the argument that was passed to the function.

If the id matches up, we use the .show() jQuery function to display the div. The argument 200 used in the .show() function will animate the display for a duration of 200 milliseconds. How cool is that =) If you leave it blank, the div will appear suddenly.

If the id does not match up, we simply use the .hide() jQuery function to hide the div. The argument 600 used in the .hide() function will animate the div so that it looks like it is sliding away. I used a higher number here so that you can see the difference in speed of the animations. Again, you can simply leave it blank if you want to make the div suddenly disappear.

That’s it!

Here is another quick example using the jQuery .slideDown() and .slideUp() functions.

Demo

slide this one only

Div #1

slide this one only

Everything is the same here except we are calling the .slideDown() and .slideUp() functions instead of the .show() and .hide() functions respectively. Even the animation duration is kept the same if you pass an argument to the function calls.

Here is the JavaScript code:

function slideonlyone(thechosenone) {
     $('div[name|="newboxes2"]').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }
     });
}

Not much explanation needed here. Same idea, different functions used.

Here is the HTML code:


   
      
         
            slide this one only
         
         Div #1
      
      
         
            slide this one only
         
         Div #2
      
      
         
            slide this one only
         
         Div #3

Same thing here except we are calling the new slideonlyone() function that we just defined.

Here is a demo for changing text in the link according to the display status of the div:

Demo – Toggle link text and toggling div

Expanded text mode ▼

Div content that will be shown or hidden.

Here is the HTML code:


   Expanded text mode ▼


   Content that will be shown or hidden.

Here we have an a tag that has the text that we want to toggle as well as the div content. Whenever the link text is clicked, it fires off the toggleAndChangeText() JavaScript function.

Here is the JavaScript code for the toggleAndChangeText() function:

function toggleAndChangeText() {
     $('#divToToggle').toggle();
     if ($('#divToToggle').css('display') == 'none') {
          $('#aTag').html('Collapsed text mode ►');
     }
     else {
          $('#aTag').html('Expanded text mode ▼');
     }
}

Whenever the toggleAndChangeText() is fired off, it will first toggle the div with our nice jQuery toggle() function in line 2. Then it will test if the div content is hidden (or if the display attribute is set to none) in line 3. If so, it will change the link to “Collapsed text mode ►″. Otherwise, the link text will be changed to “Expanded text mode ▼″ in line 7.

Next up is a pretty cool demo where we use the .animate() jQuery function to help toggle just about any element. In this case, we’ll use an image of yours truly :)

Demo

Click here to toggle me in and out =)

Here is the HTML code:


  Click here to toggle me in and out =)

I have to apologize for all the inline CSS. This is the easiest way for me to get these demos across without having to separate the styling (which is usually best practice). I am trying to do good here so I hope the HTML Gods will spare me this one time.

Anyway, the HTML is quite simple. It is just a div with some text inside and a silly image. Notice there is no JavaScript event attached to our div just yet. This is where our jQuery code comes in and saves the day!

$(document).ready(function() {
     $('#clickme').click(function() {
          $('#me').animate({
               height: 'toggle'
               }, 2000
          );
     });
});

In line 1, we tell jQuery to wait until the DOM (Document Object Model) is fully loaded or when our page is fully rendered. We do this because we want to add functionality to our “click me” div. If the “click me” div has not yet loaded and this JavaScript executes, there is no element to work on. Game over.

Instead, we tell jQuery to wait until our “click me” div is in place, and then add a click event to it (line 2).

Lines 3-6 defines our click event by animating the $('#me') element which in this case is the image. If you are not used to jQuery syntax, $('#me') uses jQuery’s all-powerful selector to help us select the element with id = me.

Once we have our element selected, we apply the animate function to add animation to this element’s CSS properties. We first begin with line 4 which toggles the height of the element and preserves the height:width ratio which gives it a shrinking effect. We use toggle here so that you can keep pressing the button to toggle in and out. You can of course use show or hide just like in the previous demos.

Line 5 just indicates how long the duration of our animation will last in milliseconds. In this demo, it is 2000 milliseconds which translates to 2 seconds (I was in AP math in high school).

Here is a demo that toggles multiples elements by the class attribute.

Demo

Here is the HTML code along with the CSS:

Lines 1-11 covers the styling of the divs so they are presentable.

Lines 12-13 codes for 2 buttons that toggles the odd number divs and even number divs respectively by calling the toggleByClass function and passing the respective class names.

Here is the JavaScript code:

1
2
3

function toggleByClass(className) {
     $("."+className).toggle();
}

Simple and sweet but a lot is going on here. Let’s dissect line 2 and cover each component separately.

$("."+className) uses the jQuery class selector with the className variable representing the class of the element(s) you want to select. In our demo, we use the oddNumber and evenNumber class names to select for their respective divs.

Once the divs are selected, we tack on the .toggle() jQuery function to hide and show the elements.

Here is a tutorial that shows how to hide or show content based on links on different pages.

That is it for yet another demo =)

If there any other demos/tutorials that you would like to see on this subject, please feel free to comment below and I will try my best to implement it.

Note: If you have an issue with your code, please give me a URL to work with. It’s extremely difficult for me to help if I cannot actually see the code.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to hide, show, or toggle your div

Allen Liu — Wed, 13 Feb 2008 06:45:00 +0000

Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.

Demo

Let's use images! click image to expand/collapse==>

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript. This content will toggle.

We will cover how to implement this example later on in the tutorial but first let's start with a simple example.

Demo

show <== click here

Here is the sample HTML and Javascript code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
script>
 
show <== click Here
peek-a-boo

By default, the peek-a-boo text is loaded when the page loads but the display attribute for the div that the content resides in is set to none so it is not visible to the visitor. When the link is clicked, the toggle() JavaScript functions executes and checks the value of the display style for the div that contains the content that we want to toggle.

If the display style is none, the function will:

Set the display style to block - This is executed in the else block of the function. The inner HTML content of a DOM element with a block display setting will be visible unless it is furthered controlled by CSS styling.
Change the link text to hide - The inner HTML of the link text, which in this case is just show, is replaced with the hide text.

If the display style is block, the function will:

Set the display style to none - This is executed in the if block of the function. The inner HTML content of a DOM element with the none display setting will not be visible for the viewer.
Change the link text to show - The inner HTML of the link text, which in this case is just hide, is replaced with the show text.

Here is a more reusable and flexible toggle function that takes 2 parameters: one for the div to hide/show and a second parameter for the div that contains the link text to be switched.

<script language="javascript"> 
function toggle(showHideDiv, switchTextDiv) {
	var ele = document.getElementById(showHideDiv);
	var text = document.getElementById(switchTextDiv);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
script>

If you spice up this demo with some extra CSS styling, this can look like a nice little dialog box.

Demo

Hide/Show Div Demo - Click here ==>

collapse

This example demonstrates how CSS styling can make this look like a window that you can collapse and restore. How cool is that?!

Here is what the CSS styling looks like:

#headerDiv, #contentDiv { float: left; width: 510px; } #titleText { float: left; font-size: 1.1em; font-weight: bold; margin: 5px; } #myHeader { font-size: 1.1em; font-weight: bold; margin: 5px; } #headerDiv { background-color: #0037DB; color: #9EB6FF; } #contentDiv { background-color: #FFE694; } #myContent { margin: 5px 10px; } #headerDiv a { float: right; margin: 10px 10px 5px 5px; } #headerDiv a:hover { color: #FFFFFF; }

Here is the HTML code:


     Hide/Show Div Demo - Click here ==>
collapse



     This is the content that is dynamically being collapsed.

That's all there is to it! =)

Here is the toogle2 JavaScript function:

function toggle2(showHideDiv, switchTextDiv) {
	var ele = document.getElementById(showHideDiv);
	var text = document.getElementById(switchTextDiv);
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "restore";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "collapse";
	}
}

As requested, here is an example of a JavaScript function that toggles multiple elements simultaneously. You can either toggle each DIV individually or use the button to toggle all 3 regardless of which toggle mode they are in.

Demo

collapse

Div #1

collapse

Div #2

collapse

Div #3

This demo uses the toggle2 function as previously demonstrated and a new function called toggle3. I apologize for not being very creative on the function names. Anyway, here is the JavaScript code for toggle3:

function toggle3(contentDiv, controlDiv) {
        if (contentDiv.constructor == Array) {
                for(i=0; i < contentDiv.length; i++) {
                     toggle2(contentDiv[i], controlDiv[i]);
                }
        }
        else {
               toggle2(contentDiv, controlDiv);
        }
}

Line 2 of the function checks to see if the first argument is an array or not. If it is an array, it will also assume that the second argument is an array as well. If it is an array, the script will loop through each element and execute toggle2 with each pair of elements in the arrays. Please note that this function also assumes that both arrays are in the same order such that contentDiv[3] and controlDiv[3] are a pair that refer to the same toggle element.

If the first argument is not an array, we will just pass the arguments as is to toggle2.

Here is the HTML code for the demo:

All the excitement is jammed into line 23 where we call the toggle3 function and pass over 2 arrays: one array containing all the content div ids and another array containing the header div ids. The rest is history =)

This demo was written in response to a request. We start off with some hidden divs and each click of the button will reveal one div at a time. When we have revealed all the divs, the button will disappear.

Demo

Here is the HTML code:


   
      
         First
      
      
         Second
      
         Third

The HTML code contains 3 hidden divs to start off with. The button will launch the toggle4 JavaScript function and pass over the prefix of the div IDs. Each div id is named with the prefix box and a number following the name. For example, box1, box2, and box3. This is important for our JavaScript function. In addition, it increments the counter by 1 each time. This variable is initialized in our function.

Here is the JavaScript code:

var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
       var ele = document.getElementById(showHideDiv + counter);
       if(ele.style.display == "block") {
              ele.style.display = "none";
       }
       else {
              ele.style.display = "block";
       }
       if(counter == numBoxes) {
                document.getElementById("toggleButton").style.display = "none";
       }
}

Lines 1 and 2 will initialize two very important variables for us:

counter - This variable will help us determine which box we will need to toggle.
numBoxes - This variable represents the total number of boxes. This is important for us to know when we should hide the button.

Line 4 accesses the div we will need to toggle based on the name that is passed over as the argument and the counter. When these 2 values are concatenated, we get the name of the div we will need to toggle.

Lines 5-10 tells the same old story as before for toggling the content.

Lines 11-13 tests to see if we have reached our maximum number of divs to toggle. If so, it will access the toggle button and set the display attribute to none.

By popular demand, here is a demo that uses images instead of the Expand/Collapse text.

Demo

Let's use images!

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.

Here is the HTML code:


    Let's use images!
    

This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.

Everything is pretty much the same as before except the image tag is used instead of the Expand/Collapse text.

Here is the JavaScript code:

function toggle5(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '';
        }
}

The toggle5 JavaScript function is pretty much the same as the rest of the toggle functions except that it switches the img tags instead of text.

Here is a new demo in response to a request where only one div is displayed at any one time.

Demo

collapse

Div #1

collapse

Here is the plain HTML code:

Clicking on the links will execute the showonlyone JavaScript function and pass on the name of the div id.

Here is the showonlyone JavaScript code:

function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

Thanks to Justin and Ulysses for helping out with the IE6 bug that was there =)

Line 2 will find all our divs with the newboxes name attribute and place them in an array. Lines 3-10 will loop through these divs and check to see if the id of the div matches the id that was passed over to the function. If there is a match, the function will set the display attribute to block which will make the div and all its contents visible. If the id does not match, the display attribute will be set to none which will make the div and all its contents hidden.

Here is a new demo in response to a request where only one div is displayed at any one time but also have the link to be able to hide the div as well (or basically toggle).

Demo

toggle

Div #1

toggle

Here is the HTML code:

Here is the JavaScript function:

function showonlyonev2(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
            name = newboxes[x].getAttribute("name");
            if (name == 'newboxes-2') {
                  if (newboxes[x].id == thechosenone) {
                        if (newboxes[x].style.display == 'block') {
                              newboxes[x].style.display = 'none';
                        }
                        else {
                              newboxes[x].style.display = 'block';
                        }
                  }else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

This is very similar to the showonlyone() function except now we are toggling the content.

Here is a tutorial that shows how to hide or show content based on links on different pages.

If there any other demos/tutorials that you would like to see on this subject, please feel free to comment below and I will try my best to implement it.

Note: If you have an issue with your code, please give me a URL to work with. It's extremely difficult for me to help if I cannot actually see the code.

UPDATE: Since this post has been pretty popular, I felt is was my duty to update it newer methods that was not available at the time of writing this blog. Nowadays, it is much easier to use jQuery to hide or show content.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers! OR...you can sign up for a free Dropbox account using my referral link =) If you are not aware of what Dropbox is, it is the most awesomest online backup application there and so much more...all for free.