Due to popular demand here’s a re-written version of the tutorial I wrote over a year ago on how to show and hide content using jQuery. After I first published the post I’ve had a lot of requests as to how you can show and hide multiple divs so I’ve written this plugin which does all the work for you!
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$('.toggleDiv').slideUp(options.speed, options.easing);
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
Here we setup the options for the plugin. you can set the speed of the toggle, if you include the jQuery UI plugin you can specify an easing effect. Also there’s an option to change the text for the button. 1 is change 0 is dont change. and the final options are the show and hide text.
$(document).ready(function(){
$('.show_hide').showHide({
speed: 1000, // speed you want the toggle to happen
easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
Here you can see the simple usage for the plugin. We’ve already set the plugin options above in our DOM ready function now here we set our divs up. for element you want to toggle, you just need to add the div id to the rel attribute of the a tag as shown below. You can now add as many show hide divs as you want to.
If you want all the open divs to close when you click to open another simply add the class .toggleDiv to each element.
<a class="show_hide" href="#" rel="#slidingDiv">View</a></pre> <div id="slidingDiv" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div> <pre> <a class="show_hide" href="#" rel="#slidingDiv_2">View</a></pre> <div id="slidingDiv_2" class="toggleDiv" style="display: none;">Fill this space with really interesting content.</div> <pre>
Vlad says: Thank you very much for this plugin!
Dan says: Thanks for the code!
I have got it working so that a div with a background image replaces the ‘show’ button and then when you click it the box appears and the div changes to the text ‘hide’. However when i click hide the box goes away but insead of the div appearing again the ‘hide’ text changes the ‘show’.
Anyone know how i would get the ‘show’ to change back to the div with the background image????
Cheers!
colau says: Hi, how can I change a class of the same or another tag with the same click?
For example, when its open oneclass.removeClass to one tag and addClass to another tag, and when its closing removeClass of this tag.
Thanks.
Steve Thompson says: Great script! I am having trouble though with compatibility. It works fine with Chrome 18 and FireFox 12, but Internet Explorer 9 is giving me hell. The only other quirk is that if you try and click on the “View More” too quickly after the page loads it disappears when you click on it.
http://www.tradingsolutions.com/products/wavsd.html
Any help would be much appreciated.
Maxime says: Hey,
Is it possible to show/hide several div’s simultaneously with the same click ?
I tried to write 2 elements in rel=”", but it doesn’t work…
Thanks!
Maxime
David says: Hey,
if you want to use an image instead of Text, this code will work:
$(toggleDiv).is(“:visible”) ? toggleClick.html(options.hideText) : toggleClick.html(options.showText);
in the options just set “hideText” and “showText” to the img tag.
Dave
Rick says: Hi David,
Can you give an example code how to use image (icon) instead of text.
Thanks
Rick
Donovan Rittenbach says: Thanks Dave for pointing out the solution to me on April 30, 2012 at 3:52 am
It worked perfectly with one minor tweak. The type of quote in your solution was the incorrect quote, at least when I copied and pasted it. Provided a posting parser isn’t going to change it, this is what ultimately worked for me. i’ve included a little extra to provide context in the code:
$(this).click(function () {
var toggleDiv = $(this).attr(‘rel’);
$(‘.toggleDiv’).not(toggleDiv).slideUp(options.speed, options.easing);
// this var stores which button you’ve clicked
var toggleClick = $(this);
thanks again for the help.
Hello,
this is a nice script, thanks for that!
Gives a addon who its only one div open (show)?
I find better when i have one div open and click a other div so must be clos the first div automatical and open tha the new div…
Regards, Stefan
Hi everyone, and thanks for an awesome script Ashley!
I’m not sure if anyone else has had problems making the div boxes default to the “hide” position when the page loads, but i found a solution for this.
Add style=”display:none;” inside the div brackets of the ones you want hidden by default.
Great plugin, but you need to move ‘toggleDiv’ before click function.
Otherwise it keeps closing when you click.
var options = $.extend(defaults, options);
//Moved here to make it work
$(‘.toggleDiv’).slideUp(options.speed, options.easing);
$(this).click(function () {
// this var stores which button you’ve clicked
var toggleClick = $(this);
Cheers, Emiliano
James says: Hi,
I have recently used this plugin and it seems to work great!
I have just come across one issue which I can’t seem to resolve in that I would like the page to scroll automatically when you click on the show/hide link. At the moment in some cases the content disappears off the screen as it closes one box and opens another. I’m hoping there is a quick fix for this as I like the plugin and just need to get passed this last issue.
I have read the posts previous but can’t seem to find anything to help!
Many Thanks
James
Dave says: Hey guys,
Dave again (from earlier in the comments!). I have come across an issue and I would be most grateful if Ashley (or anyone else) knows how to fix it. I’m using it for a menu, when you click on a menu option the sub elements slide open. This works fine apart from when the suboption text spans over 2 lines without a manual line break. It always seems to assume each entry is only 1 line high so it means the div expands to the height it would be if each suboption was one line then jumps the rest of the way. So if i have:
Option 1
Option 2
Option 3
Then it works fine, however if i have
Option 1
Option 2 with some long text which automatically
breaks to the next line like this
Option 3
Then it will slide down to the bottom of the 2nd line of option 2 and then jump to the bottom of option 3. If i add a manual line break in the middle of option 2 then it solves the problem as it can then work out how many lines there are. It’s obviously an age old problem working out how many lines text automatically spans over and i cannot for the life of me work out how to stop this from happening without manually adding line breaks which isn’t suitable as it’s a dynamic menu which changes based on user input?
I would massively appreciate any pointers anyone can give, even if it’s just an idea that I can look into further, I will of course post any findings on here for everyone else to use as well.
Thanks everyone and thanks for the plugin Ashley!
Dave
Omahr says: Please help. The parent toggle doesn’t resize… how can i fix it?
thanks in advance.
Chris Byrne says: Love this – absolutely fantastic plugin and just what I was looking for. However, I’ve used the ‘toggleDiv’ class, but I can’t seem to work out how to turn off a div after it’s been clicked. i.e. when I click on a picture, it shows the div as expected, but I then can’t get it back to its default hidden state.
I’d very much appreciate a reply. Thanks for all the good work!
David says: I have the same problem as you…
Donovan Rittenbach says: Me too…the div starts with style=”display:none;” then you toggle it and it blinks closed then open.
David says: hey Donovan look down i posted what you have to do so it works.
do a search in this site ( ctrl + f )
for:
April 30, 2012 at 3:52 am or for David
and you’ll find what you have to do. 
hope it helps
Edgar says: Any help on how to add other animation effects to this excellente plugin??
Julia Barry says: Awesome plugin!
I’m wondering if there’s a way to make the “Show” text instead be whatever the linked text on that item is?
I can have the link text say something like “Documentaries” at first, but then once you click on it, the word goes back to “Show” and “Hide.”
I’m trying to use this with categories that organize content, so the names of the categories can’t change to “Show” once you’ve clicked.
Hope this makes sense.
Thanks!
Sebastien says: Hi everyone,
First, thanks for this plugin, it is very useful!
My issue is that the parent divs do not resize properly when the toggled on then off again (tested in all major browsers). I am using joomla and a template (I posted the issue on their support forum but, even though they are still investigating it actively, they think it might be a more generic bug). Debugging using firebug show this as well, but I am not sure why the code, as provided, does not handle these container/parent divs correctly.
Steps to reproduce:
1. add in the head the java script showHide.js (shown here)
2. create a new article in joomla (in my case) with the following html code:
Refereed Articles and Book Chapters
2012
<!—->
a, b, c, “Title”, In journal, pp. 0-13, 2012.
Sample text that will be replaced by a video player… Sample text that will be replaced by a video player… Sample text that will be replaced by a video player… Sample text that will be replaced by a video player…
<!—->
3. Go to the article URL
Demo site with that issue : http://goo.gl/YCQbl
4. Click on the Video Icon (at the right), which uses jquery:slideToggle().
5. The template expands to show the text.
6. Click again on the video Icon. The content div / black border resizes but the parent divs are not resized properly.
Expected result: the parent divs are also resized to adapt to the new size (e.g. bigger when visible and smaller when hidden)
Actual/wrong result : the parent divs do not resizes, so if I have many videos, the page ends up with a lot of blank spaces on the page, which has to be scrolled more inefficiently.
Anyone have an idea on how to investigate this problem further to fix it ?
Thanks a lot.
Thanks Ashley and thanks @Dizzy (Dec. 8, 2011) and the guys whose work he expanded on (@Dave and @Erik). I took Dizzy’s code, and substituted it for the equivalent function in the plugin (even though I’m quite at sea with jQuery and Javascript). No more bouncy divs! I have 5 showHide divs on the page and only want one open at a time. And I want it to be possible to close them all. Now when I click Close, it stays closed; it doesn’t bounce open again. (Haven’t tried IE7 but it’s working in IE6.)
Another great example of internet collaboration with total strangers. Gotta love it.
Laura says: Get code…I was able to create a page with multiple opening divs. I would like to see “Contract All | Expand All” feature to help indicate to a user that they will open as well as all divs would open or close at one time. Do you have any recommendations on how to code.
Thanks in Advance
Phillip says: Great script – i’ve read through the comments, and I’m still getting the ‘bouncy’ div when I use the .toggleDiv class to close other divs when i open a new one. When i try to close the open div, it closes, then opens up again.
I’ve tried moving:
var toggleDiv = $(this).attr(‘rel’);
to the top of the function as suggested, but it doesn’t do anything.
Steve says: How would one do something like this? Let’s say I have a lot of data to display, and I want to display some of it and and then have a “view all” link to toggle.
I put my initial data into a div:
….
And my full data into the other div:
…
Using the toggleDiv class it works fine – except when I go from the full view and click on the “Hide” link – it doesn’t toggle the toggleDiv back to visible.
Hi Steve,
Sounds like you need this tutorial: http://papermashup.com/truncate-text-with-the-jtruncate-jquery-plugin/
Hope that helps!
Ashley
Rick says: Adding to my previous commend – I should not be so lazy….
I removed the display: none, to the div starts visible – just had to change the link text on the open div so it showed close” instead of “view” .
The only downside is that all DIV’s are visible. I assume that just adding more styles for each div would fix this.
Again, thanks.
Rick says: Great tute. One question – how do I start with a div already open? For example, I have a full page slider on my site. The content is in a container div. I want people to be able to hide/unhide the container. Pressing hide – they only see the background slider.
See what happens when you write a great free plugin? You spend hours on tech-support!
Thanks
Richard says: Hey Rick did you figure this out? I have the opposite problem…
For whatever reason my divs are opened when the page loads and I would like them not to be, but can’t figure out how to change this.
If you have the solution please share!
@Richard,
You just need to set the CSS for the divs you’re showing and hiding to display:none;
Ashley
Nate York says: Greetings!
This is perfect for what I have been looking for!
And it works great, thanks Ashley, and forum for all the help.
I am feeling a little dumb, as I cannot get the toggle to work at all.
When I compare my code I just got yesterday from this site with what @Dave was talking about, mine looks different.
——————————————————-
$(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
$(‘.toggleDiv’).slideUp(options.speed, options.easing);
// this var stores which button you’ve clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr(‘rel’);
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
—————————————–
Do I need to make any modifications? I have added the toggleDiv class to my elements.
Any thoughts?
Sorry, I know people have been talking this into the ground, I just cant seem to figure it out 
n~
Hi, Firstly thanks for this its a great piece of code.
Is there anyway to make this validate under HTML5 it gives errors because your using an un registered “rel=”?
Let me know, thanks
Rufus says: Love this, works perfectly!
I want it to slide from side to side instead of up and down, and have tried everything I can think of. I notice in the first show/hide tutorial someone asked the same thing and in that case it was a simple matter of changing height to width in the css, but that does not do the trick with this code.
Any clues?
eric says: I want to use images instead of text for the show / hide elements. How do I do this?
Just found your site and find it very helpful. I want to use showHide.js in my page but I am unable to get it to work. In a div container I want to be able to have a list of links (div-left) and then on clicking the links I want to show a description with a picture in a separate div to the right of the link (div-right). Is this possible with showHide.js or should I be looking for another script? This is my first attempt at JQuery.
Mike says: To make the link stay white, I would assume that you simply style it as such in the stylesheet that you are using:
A:visited {color: #FFFFFF;}
To have the divs expanded by default, remove the “display:none” property of the stylesheet.
tom says: Ok, I am running into two small things.
-the expand/ collapse link is turning purple. I think this is because I have “visited” it before, so my browser is making it purple. But I’d really like it to stay white, because it matches my theme. How can I do that?
Click To Expand
-also, how can I make the div by default be expanded, instead of collapsed? I’d like to do this so I can add a cookie for the user to keep it closed once they close it, but for new visitors to see the full menu.
Thanks
tom says: I really wish there was an edit button here..
I think I got it to work, I just aborted using a preview image of the menu. thanks.
tom says: Ok I finally have something useful. Please disregard the last 2 comments.
I got it to work, but…
I’m not sure how to get it to do exactly what I want. Basically, I want this to work with my menu. I have two divs, one with a “preview image” of the menu, and the second one with the actual menu. When the page first loads, I want the preview image to be visible only. When I click the view/ toggle link, I want the image to “close”, and then after that happens, I want the second div to “open”. Then pressing it again would undo this process. How would I do that using this code?
tom says: ok I finally got it working. I’m new, my mistake was I didn’t update the script location to be in my /script folder. Thanks so much!
tom says: I’m trying to implement this, but I’m failing. Could you please make a “for dummies” edition?
Mike says: Ashley,
Nice script indeed – I’ve been using it in the FAQ section of my page to show/hide answers. I have a question, for you or anyone that may be able to help me. I’d like to update a database when someone clicks the link to VIEW the div – this DB would not be updated when CLOSE was clicked. The idea being, to keep track of the most popular FAQ entries and bring them to the top of the pile.
I’ve taken a look at your “Delete and Update DB” script for ideas, but so far all I can manage is to update the DB on both VIEW and CLOSE, which will give me inaccurate results. Any help would be appreciated.
roger says: having same issue as Katari. i am using lightbox to display a gallery, then adding link to a div that has a form in it. script works great outside of lighbox overlay but not inside, i get the link to show but just pops to top of lightbox overlay.. i am using header file to display page.
Wiinter says: I’d be surprised if Ashley or the early responders/troubleshooters are still watching this open thread. BUT, I’ve a question for anyone who might know.
And, and answer: this script works great with tables as well – I just apply the class to the , and have the showHide div surrounding content in one of the table cells. The table row grows/shrinks as the toggle. It’s awesome! I did use Dave’s mod, however. (see above exchange between Dave and Eric). And I don’t use togglable text labels.
My question, though: when I use the class within the table, some hyperlinks refuse to keep their hit target on top. Meaning, if I click a link within one of the cells, the showHide function activates instead of the hyperlink target. If I right-click the link, however, and choose “open in new window”, it opens fine AND the showHide function doesn’t activate.
Aaron says: I can’t seem to figure this out, maybe someone can help. So what I want to do is have the picture show by defualt, but then when the link is clicked, the picture will change to a div, so the picture hides, and the div appears. here is what it looks like
=’$basenumber’ limit 8″);
while($row = mysql_fetch_array($sql)){
$imageid = $row['id'];
$image2 = $row['link'];
?>
<div id="apDiv” ><img src="” width=”300″/><div id="apDiv” style=”background-color:#999; height: 300px; width: 300; display:none” class=”toggleDiv” >
<a href="#" class="show_hide" rel="#apDiv”>change
….
maybe someone can help….please and thank you.
matt says: Just an update, figured out why they were open by default.
It was simply a comma that must have been inserted accidentally.
Now its working just as I want.
Thanks again
Mark Engelhardt says: Matt,
As far as starting with the divs closed, I believe Ashley’s demo page behaves the way you want… display:none; works for me.
my div looks like this:
Good luck!
Mark
Jonas says: @Ashley
Great plugin, thanks!
I have a problem though..
When i click on a div to open it and i clicks on another div, it opens while the first one closes.. simultaneously. What i want is the first div to roll up and close, and THEN the new div that has been clicked on opens. What to do?
matt says: First, thanks for this, its great.
Maybe I missed it, but i want to have the content not display by default. I tried in the css for the div, setting: “display:none;”
But it always shows the content on load… Am i missing something?
Thanks in advance
Aaron says: how do you make the div closed by default?
Travis says: Is there a way to use this with tables/tr/td/ ? Thanks!
cecilia says: I’m wondering the same thing as @Viktor, how do i make the content slide up instead of down?
@Ashley thanks for a great script! People like you makes it possible for me to grow as a web designer, because i’m really not a great programmer.
Ann K says: Hello,
When i have 8 divs that i need to slide with all varying heights.
When give the sliding div height: 100% there is a jerking motion on the slide effect.
When the div has a specific height example height: 300px; then the motion is smooth.
Is there a way to fix this or do i have to give all my divs a specific height?
Thanks for any help!.
-Ann K
I’m trying to edit a page with tables (the redesign for the site is pending) to have a few hidden divs that appear when you click on the relative link, so this plugin seemed like exactly what I need.
When I click on my links (changed from View), they just bounce me back to the top instead of opening the div.
Here’s my html:
Answer
Question
Answer
(etc)
Amanda says: Fixed my problem – this works: $(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText).css(‘background-image’, ‘url(/images/image1.gif)’) : toggleClick.text(options.showText).css(‘background-image’, ‘url(/images/image2.gif)’);
Amanda says: Really liking the plugin – works more smoothly than some others that I have looked at. Trying to find a way to use CSS to change the appearance of the show/hide hyperlink once it’s clicked when class=”show_hide” is being used for the hyperlinks. Tried using:
$(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText).css({ backgroundColor: ‘#399C05′ }) : toggleClick.text(options.showText).css({ backgroundColor: ‘#FFFFFF’ });
That worked fine, but it broke when I tried using background: url(/images/image.jpg). Shows “Microsoft JScript runtime error: Object doesn’t support this property or method” and show/hide stops working. Any suggestions?
Dizzy says: Thought I’d expand upon Dave’s suggestion by adding my own. This applies specifically to those who want a only one-at-a-time toggling method.
I noticed if you wanted the text to change once a show/hide link is clicked, the current div wasn’t being reset to close as it was being slid up. To fix this, you can use the .not(toggleClick) Dave referenced to handle that. The resulting click function is:
$(this).click(function () {
// this var stores which button you’ve clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr(‘rel’);
//slide up any divs that are not the one to be toggled
$(‘.toggleDiv’).not(toggleDiv).slideUp(options.speed, options.easing);
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText == 1) {
$(toggleDiv).is(“:visible”) ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
//typically this will just set the text to the “show”
//text since it’s not the div currently selected
$(‘.show_hide’).not(toggleClick).is(“:visible”) ? $(‘.show_hide’).not(toggleClick).text(options.showText) : $(‘.show_hide’).not(toggleClick).text(options.hideText);
}
});
return false;
});
I imagine this could easily be more generalized. I think you’d do it with the jquery .each() to loop over every ‘.show_hide’ class and then check if it’s relevent div is of the class toggleDiv using .hasClass(‘toggleDiv’), but I don’t really know squat about javascript so I couldn’t figure out the syntax. Anyway, hope this helps.
Thanks @Dizzy. I’m a total noob at jQuery, and your fix for this plugin worked for my situation so you’ve saved me lots of time. Thanks!
Dave says: @Ashley thanks very much, great plugin You might want to amend the code so it excludes the current div so it works off the shelf for other users? Cheers, Dave
Dave says: @Erik No worries, Ashley did all the hard work!! Cheers, Dave
@Dave @Erik great to see you guys got everything sorted. Glad you found the script helpful, and if you have any other problems just post them here.
Best
Ashley
Erik says: Great! It’s working! Thank you very much Dave (and Ashley!)
Dave says: @Erik You have to move the line that says:
var toggleDiv = $(this).attr(‘rel’);
to the top of the function (above the $(‘.toggleDiv’).not(currentDiv)….. line). I also mistyped the attribute name, so change currentDiv to toggleDiv and it should all work.
Cheers!
Dave
Erik says: Dave, thank you very much for your reply, but I still haven’t got it working. I don’t have much/any javascript knowledge, so I’m not exactly sure what you mean with moving the var which stores the button information ON TOP OF THE var that = this rel attribute. I mean, isn’t it already on top of it (the line above?) This is what I got:
$(this).click(function () {
$(‘.toggleDiv’).not(currentDiv).slideUp(options.speed, options.easing);
// this var stores which button you’ve clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr(‘rel’);
Thanks in advance,
Dave says: Hey everyone,
For those of you having problems opening and closing a div (without clicking on another div) it’s because the script is currently set to close all divs with togglediv class (which will most likely include the current one). This means they are all closed and then the current one is toggled so it’s reopened. To fix this you just have to exclude the current div from the original close, so just move the var which stores the button you’ve clicked on to the top of the function (var toggleDiv = $(this).attr(‘rel’);) and then change this:
$(‘.toggleDiv’).slideUp(options.speed, options.easing);
to this:
$(‘.toggleDiv’).not(currentDiv).slideUp(options.speed, options.easing);
It should all be working now! Thanks so much for the great plugin Ashley!
Dave
David says: Thanks Dave i tried what you said at first it didnt work when you say:
$(‘.toggleDiv’).not(currentDiv).slideUp(options.speed, options.easing);
but
i changed that line for this :
$(‘.toggleDiv’).not(toggleDiv).slideUp(options.speed, options.easing);
and now it works, my div can close without reopening!
Great Job Ashley btw!
Erik says: I also have the can-not-close bug (when you close the div, it automatically opens again). It’s only there when you use toggleDiv, because I didn’t had this bug at the beginning, when I had only 1 show/hide div,
Erik says: Thanks for the script, it works great. But just wondering, could I also make the ShowText and HideText options show HTML? I tried changing toggleClick.text to toggleClick.html but it don’t seem to be that easy
Pranav says: I am a javaquery newbie… Is there any way to change this plugin behavior a little bit?? What I want is when I click the second view button, the first sliding window should automatically get closed. What I am saying is basically I want only one expanded window at a time.
great script, works perfectly !
@peter : set “changeText: 1″ to 0 at line 06 and edit html as :
<a class="show_hide" href="#" rel="#slidingDiv"
I suck at JavaScript and jQuery. I was able to get the one div show/hide plugin working but I have no idea about how to get this working. I have in my site directory before this code but I´m unable to get it working. I tried adding before the plugin and then closing it after the code but no. The plugin isn’t working. I´m using chrome. I have the CSS from the earlier plugin in use but all I get is two links that don’t work.
Warren says: I have a section of a form in the div with extra fields to be filled out if expanded.
How would I go about setting the values of any inputs to nothing when the div closes if someone has input any information in a form in the div?
Thanks again for your time.
Viktor says: Hey guys really nice script, but since I’m new to programing can someone tell me how to make it to slide up ? I want to make the button on the bottom and slide the content up.
Ashley, Thanks for the new code. However, I’m seeing the divs closing now, when another is opened but the header link text still says “Close” after it “closes” and i too am having the springy divs that wont close. So what you end up with is a set of text links that have been opened and closed, and they all say “Close” and usually one is springy out of control.
Seems to need some sort of reset. Any ideas why this is happening?
Warren says: I see how I can add it to a radio button. How do I have it expand the div when the yes option of a set of radio buttons is clicked and closes the div when the no option is clicked?
Thanks for this code.and your time
Warren
Sandra says: Works great – except in IE7! Augh!
Any fixes for IE7?? HELP!!!
Vladorz says: thank you so much! you saved my day! this is the best tutorial i could find on this subject, very well explained
Peter says: Hello Ashley,
Nice script!
I would like to click on an image instead of text to open and close each div.
How can I get the image to adopt the states of ‘show text’ and ‘hide text’….I want to remove ‘view’ & ‘close’ and just use the image…
Hope that makes sense? : )
Regards,
Peter.
Francisco says: @ Ashley,
The previous div does close once a new one is opened, however, I cant seem to get the div to close again once they’ve been opened without clicking on another button to open a new one. The previous div does however close once a new one is opened.
Any help would be appreciated.
Many thanks.
F
Hey, thanks a bunch for this. Is it possible to add a bit to the code that makes the div slide closed when you click outside of it? Thanks!
Joe says: @Ashley,
I really just added the radio button to the mix because I wanted to test if all of these could hide/show content.
The radio and checkbox do seem to show and hide perfectly, the checkbox just doesn’t show as checked when I do so.
Joe says: @Ashley,
Any thoughts of the checkbox showing as checked functionality?
http://jsbin.com/ogaxic/3
@Joe, Are you looking to have multiple checkboxes that reveal different content? or radio buttons? a single radio button will never work as you have to have more than one. What are you looking to achieve?
Francisco says: @ Ashley, you’re gonna hate me pal
Now, when I open a div, it opens and closes the previous one except when I tried to close the currently opened div, it closes briefly and then suddenly opens up again. I’m gonna try to work this one out (hopefully) but if you have some time, perhaps this might be fixed.
Great work. Many thanks for your help so far.
Francisco says: @Ashley.
WOW!!! Quick response too. Well done on this one Ashley. Most grateful.
I tried it… and of course, undoubtedly, it works beautifully and smoothly. I’m sure everyone else after this would be immensely pleased as I am 
.
Now it feels complete.
Brilliant stuff.
Francisco says: Hi Ashley, great script. Working like a charm so far but I’m still struggling to work out how to close a previously opened div when another one has been opened. I tried changing the divs to classes and naming them the same name but they all open at the same time now. Looks like magic but not what I want to achieve
Any help on this would be great. An example would be brill.
Many thanks
@Francisco Thanks! I’ve just updating the code so you can optionally choose to close all the divs when another is selected. Simply add the class .toggleDiv to each element you want to close.
dee says: @ashley,
when we set all the divs to the same class, they dont toggle they show up all at the same time..
its a pity – at first look this script looks great but after implementation its missing the one thing everyone here is asking for 
This doesnt work:
Fill this space with credit card info
Fill this space with 2nd div info
Fill this space with 3rd div info
Chris says: I am also trying to toggle divs so when one is open you click the next one the previous opened one closes and new one opens anyone have this working?
Kyle says: Also having this issue:
oe says:
November 7, 2011 at 5:20 pm
I currently have this on a checkbox but the checkbox doesn’t show as checked. Any ideas?
How can I have the checkbox stay checked ?
Did anyone figure out how to get other div to close when you open a second one?
@Ripley you should be able to do this by setting both divs with the same class so it toggles.
Joe says: I currently have this on a checkbox but the checkbox doesn’t show as checked. Any ideas?
joe says: This script works great. How hard would it be to also allow it to work with a checkbox or radio button instead fo a link?
Charaf says: Hello,
I’m trying to use this plugin to collapse a sidebar, but when the sidebar disappear the main content area doesn’t expand to fill space left by it!
How can I do this?
An another thing: how to change the animation effect? I did download jquery-ui.js and add it’s link to my html page, but when trying to use some “easing” like swing, it doesn’t work!
May be these are a stupid questions, sorry! I’m totally new to JQuery/Javascript world (and hope you undrerstand my english)
Thanks a lot.
RE: http://www.chefsconsortium.com
Works great. Except that once clicked it opens then quickly closes… I was also wondering if anyone has placed all the html in a div container so that I could implement this CSS rule successfully:
direction: ltr;
height: 28px;
position: fixed;top: 0;
left: 0;
width: 100%;
z-index: 99999;
thanks!!
Andy says: Well spotted Jeff. It’s working like a charm in IE6 now. Just about time, else i was about to go for another solution. Great plugin and works on all browsers now
Jeff says: Line 10 of the plugin should not have the comma. This comma always makes IE tank. Remove it and the plugin should work just fine in IE.
@Jeff you’re a genius. I’ll be sure to make this update to the code. Many thanks.
Ashley
Andy says: Hi Ashley,
Even this doesn’t work on IE6. Are all your scripts not compatible with IE? Really liked this script, but really need to get it working for IE. Any suggestions to make it working for IE?
Thnanks
Michael says: Thanks for this, great script! Though unfortunately it is not working for IE7. Any fixes for this?
Thanks!
Chris says: Hello, I have a few questions in regards –
Once one anchor is clicked and active, and then the next anchor is clicked how can we have the previous active toggle div close instead of staying open.
Also when replacing the text when the div is open is great but how to make it so when we click “close” on the active anchor it goes back to the default instead of switching it “show” text.
Thanks in advance hope this is understandable and you may be able to help.
Kevin says: How can I close the previous div when I go ahead and click on another link? Since I don’t want all of them to be expanded all at once.
Thanks,
Kev
Diego says: Ashley, one question: There is any way to configurate this to show one div and hide the another ones, like a frame? Did you get it?
Thanks for the plugin!
Simeon says: Hello there! What about the xhtml rule that does not allow “div” nested in “a”?
I am not so experienced so i just ask?
Thank you.
Andy says: oops, i tried creating css class instead of id earlier and it didn’t worked and tried again today and it worked. Probably bcos of caching issue. So it’s all great. Thanks for a great sript. I have added jquery pagination to it and it works like a charm.
Matt says: Hi
This doesn’t seem to work in IE7, I have tested your demo on IE7 and it doesn’t work, any ideas, as I really like this script.
Cheers
Andy says: Thanks for this plugin Ashley.
Fill this space with really interesting content.
As per the code above, for each button and div, I need to add unique rel attribute and div id.
As these buttons and div will be created on the fly (dynamically), it’s easy enough to set up a php script to generate these unique ids and echo it , instead of manually typing slidingDiv under rel and div id.
But how do i add these IDs properties in css dynamically?
In your css, you have #slidingDiv, #slidingDiv_2,#slidingDiv_3 but what if these ids are generated dynamically?
Love it ! The easing effect is what makes this plugin rock over a few other plugins of its kind whereas : they simply either expand or drop down without any transitional effect .
Great one Ashley
BTW : Any plans on creating a WP Plugin out of this ? Would be sweet.
Cheers
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan. I also run Mega Infographics for your daily dose of the best infographics.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
154 discussions around jQuery Show / Hide Plugin