Show Hide Expand Collapse Javascript

Show, Hide, Expand, Collapse and Toggle functions with JQuery.

Can I show hide or expand collapse a html element like a div with java script?
Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse.

The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us.
Once jquery is uploaded set up your in-page html. The overall structure doesn’t matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command.

</p> <div class="slide" style="cursor: pointer;">Show/Hide</div> <div class="view"> This will get shown/hidden depending on the toggle above. </div> <p>

Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we’re selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information.
At this point you need to add the show hide toggle command. A.k.a the link that we’ve added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it’s existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed.
The last part of the script, the “400″ in your toggle function is the speed. You can either use a number, or use a word such as “slow”, “fast”, etc.. keep in mind though, when using words you do need to put them inside ‘quotation marks’ for it to register.

The final script for a single instance along with JQuery gets put in the head of your document:

<br /> <script type="text/javascript"> $(document).ready(function() { // Hide the "view" div. $('div.view').hide(); // Watch for clicks on the "slide" link. $('div.slide').click(function() { // When clicked, toggle the "view" div. $('div.view').slideToggle(400); return false; }); }); </script><br />

If you would like to have multiple instances on the same page click “continue reading” below and use the following code instead which uses .next for multiple sliders on the same page.

The below example uses “next” so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page.

<br /> <script type="text/javascript"> $(document).ready(function() { $('div.view').hide(); $('div.slide').click(function() { $(this).next('div.view').slideToggle('fast'); return false; }); }); </script>><br />
That’s it! It’s really that simple, just add a few lines of code and you have an html element that can expand or collapse. You can use this javascript to show and hide paragraphs, individual links, images, or entire sections of your page.

  22 comments for “Show Hide Expand Collapse Javascript

  1. September 18, 2009 at 4:43 pm

    Hello. I have a floating bar in the footer with some links and i want to expand content from bottom to top. How can i do this ?
    Very usefull script. Thank you

  2. Dylan Wagstaff
    September 20, 2009 at 9:54 am

    Hi Andretti, great question. The trick to reverse the slide direction is to use some CSS. As a starting point you could add the below code. The exact position will of course need to be adjusted according to your specific page placement.
    CSS
    .view {
    position: relative;
    }
    .slide {
    position: absolute;
    left: 0;
    bottom: 0;
    }
    The html will also be adjusted slightly where the view div will get placed inside the slide div instead of after. Here is a quick example.

  3. ss99
    January 8, 2010 at 11:37 am

    HI, and thanks so much for the great script.. looks awesome.
    This is my VERY FIRST javascript attempt to learning this was like pulling teeth. But after I figured it out, it was not too bad!
    Ok, the only issue I have now is using the sibling feature. I’m not sure how that works..
    I’m currently building an FAQ list and I want the answers to expand whenever the corresponding question is clicked. Right now, it seems like whatever question I click on, everything expands at once.. How do I separate them so that only the question clicked on expands it’s individual answer?
    Thanks for your help!

  4. ss99
    January 8, 2010 at 11:41 am

    HI, and thanks so much for the great script.. looks awesome.
    This is my VERY FIRST javascript attempt to learning this was like pulling teeth. But after I figured it out, it was not too bad!
    Ok, the only issue I have now is using the sibling feature. I’m not sure how that works..
    I’m currently building an FAQ list and I want the answers to expand whenever the corresponding question is clicked. Right now, it seems like whatever question I click on, everything expands at once.. How do I separate them so that only the question clicked on expands it’s individual answer?
    Thanks for your help!

  5. Gibson889
    July 26, 2010 at 5:09 am

    is it possible to expand and collapse a video? Like say you have a thumbnail for a video, and when you click you want it to expand and then play….kind of like when people link youtube vids on facebook.

  6. August 2, 2010 at 3:46 am

    I love your tutorial, but have a question, my whole site is going to revolve around this design. I know nothing about jquery, but am learning.
    I have got multiple versions of show/hiding working in the same page, the only proble m is that it takes forever to make. I have to create a new script for each one along with the CSS. is there a way to shortcut this? you can check out my site(in progress) at http://www.shawnkirsch.com/new/Index.html

  7. Lizette
    August 3, 2010 at 2:26 pm

    Can you tell me how I can get the script (i’m using the fade script) to have only one div open at a time? I’ve implemented it here:
    http://www.destinationthemepark.com/park/florida/
    When I select “hotels” to expand, it expands both divs instead of only the one I’ve selected.
    Thanks in advance!

  8. Dylan Wagstaff
    August 5, 2010 at 7:59 am

    Each view tag should already operate individually. My guess is they are within the same container div and need to be separated so that each instance has its own container div. Try putting each slider (slide and view tags) in different container divs.

  9. August 9, 2010 at 9:19 am

    I have text and images inside my hiddentext and when I open expand, it becomes rather slow. Is there a way to “preload” the images and text?

  10. Dylan Wagstaff
    August 12, 2010 at 7:17 am

    To preload images with jquery you would use the below example. Remember to put in script tags.
    //Function that preloads a defined list of images (arguments for the function).
    jQuery.preloadImages = function(){
    //Loop through the images
    for(var i = 0; i”).attr(“src”, arguments[i]);
    }
    }
    // Call the function:
    $.preloadImages(“images/1.png”, “images/2.png”, “images/3.png”, “images/4.jpg”);

  11. August 22, 2010 at 2:33 pm

    How do I change the text from “more…” to “…less” based on the status of the expanded/collapsed div?

  12. August 22, 2010 at 3:43 pm

    Answer:

    $(document).ready(function() {
    $('div.view').hide();
    $('div.slide').toggle(
    function() {$(this).text('less...').siblings('div.view').fadeIn('slow');},
    function() {$(this).text('more...').siblings('div.view').fadeOut('fast');
    });});
    
  13. October 27, 2011 at 6:32 am

    I am also having trouble with my tags operating at the same time instead of individually. I’m not exactly sure what you mean by putting each slide in different container divs. What would that code look like?
    Thanks!

  14. snowmartin
    October 27, 2011 at 7:57 am

    Thanks for the script! I’m also having the same issue as the others and put a container div around each block, but still would show/hide everything at once. Any other suggestions? thx!

  15. November 13, 2011 at 6:30 am

    Same problem as the otehres here, I can’t seem to get individual DIVs to open and close without interfering with other DIVs.
    Any way to fix this?
    I planned on using this neat script for a FAQ page and it’d be stupid if you could see all the answers without actually clicking on their corresponding questions 😉

  16. Flying Squash
    February 10, 2012 at 11:54 am

    Great tutorial! The second set of jQuery code you provided included siblings as a means to show/hide multiple divs at different times. Would you mind showing me an example of code that will allow me to do this?
    Thanks!

  17. March 11, 2012 at 9:11 am

    The toggle works perfectly but i’ve run into a problem.
    I placed a fancybox gallery within the toggle divs but when a thumbnail of the gallery is clicked on it opens the bigger image in a new window instead of a pop-up.
    Is there a fix for this bug?
    Thanks!

  18. davinci7
    September 27, 2012 at 6:59 pm

    I have the same problem as most people here. When i use more than one expandable test item, they all open at once.
    Ok here’s the weird thing.
    When I omit the code (you told us to put in the head)
    ” $(document).ready(function() { // Hide the “view” div. $(‘div.view’).hide(); // Watch for clicks on the “slide” link. $(‘div.slide’).click(function() { // When clicked, toggle the “view” div. $(‘div.view’).slideToggle(400); return false; }); });
    The whole thing works fine i.e. only one item will expand at a time.”
    I noticed that you yourself do not have this code on this page either.

  19. February 25, 2013 at 7:29 pm

    Like most people commenting, I would also like to know how to create multiple sliders.
    I tried the script and it works but it opens all 7 at a time.
    How do i structure the script to open one at a time. I’d appreciate an typed example since i’m not a coding expert and don’t understand what all the code parts mean.
    Thanks in advance 🙂

  20. February 25, 2013 at 9:32 pm

    How to have multiple show hide sliders on the same page?

  21. Dylan Wagstaff
    February 26, 2013 at 1:28 pm

    Hello, There is already an example of how to have multiple instances on a single page above.
    It is not necessary to have a separate script for each toggle as you have done in your page.
    We only need to incorporate the use of “next” into the code. There is an example of this if you refer to the original article above and click continue reading.
    Using the second bit of code listed instead of the first one allows us to have multiple .slide and .view divs on the same page.

  22. March 19, 2013 at 12:08 pm

    Great code! love it. Id like to say its annoying for 1 person to ask a question, have it answered, and then 40 people all ask that one question.
    I have a unique question: How would I add a plus sign or minus sign or some sort of image on the side of the slide bar that changes with the click? Here is how I have implemented your code on my site: http://ourgigatest2001.us/news.html
    I would like to add an image if possible.

Comments are closed.