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.
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 along with JQuery gets put in the head of your document:
For something a little more fancy you can use the code below which has the same function as above but uses a fade in and out effect on toggle. The below example also uses siblings so we can have multiple divs that collapse and expand on the same page.
Filed in Design Tips & Techniques and tagged design, html, javascript, jquery, web
Share 
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
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.
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!
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!
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.
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 www.shawnkirsch.com/new/Index.html
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!
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.
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?
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).![]()
").attr("src", arguments[i]);
jQuery.preloadImages = function(){
//Loop through the images
for(var i = 0; i jQuery("
}
}
// Call the function:
$.preloadImages("images/1.png", "images/2.png", "images/3.png", "images/4.jpg");
How do I change the text from "more..." to "...less" based on the status of the expanded/collapsed div?
Answer:
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!
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!
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 ;)