Jquery: show/hide multiple elements independently

Justin Young said on 14.10.2008. 04:48

Thanks very much! Works great!

Andy said on 24.11.2008. 16:27

This may be a silly question but I'm new to Jquery and couldn't get it to work which got me wondering,..... is this a .php specific script (I'm just wondering as it's got the $ on each line). It doesn't seem to say in the article.

If it is, doesn anyone know of a similar solution for .asp as this one is really nice and clean.

Thx

Andy said on 24.11.2008. 16:30

It's pure javascript, but is based around the jquery library, so will run on any html page (including PHP and ASP-generated pages). Probably it didn't work because you didn't link to the jquery library itself. I'd suggest you start with "getting started" in the jquery docs:

http://docs.jquery.com/Main_Page

Ron McElfresh said on 24.11.2008. 19:37

I notice that the code above does not validate XHTML 1.0 transitional (using BBEdit) because of the

Andy said on 25.11.2008. 11:35

Hi Ron,

Apologies - I think the HTML you included got stripped (I'll look into sanitising that as opposed to ditching it entirely).

Generally, I include all javascript from external files, which means there can't be any validation problems. If the reason it doesn't validate is due to the HTML for a link included, you can split this up within the code so the validator doesn't confuse it for a link, or put comments around the whole script block. But I always favour external files for js which is IMO much cleaner.

MojoWill said on 25.11.2008. 21:04

Great script just what I was looking for is there anyway to make an entire line f text the toggler? or style the show/hide text somehow?

Im using it for a FAQ clickin to show the answers

http://testing.mostlymojo.com/hertford/faq.php

test said on 26.11.2008. 08:11

Hello,

this is not working in IE 6 + XHTML . kindly advice

Andy said on 26.11.2008. 10:09

You can easily style the toggle link - it has a CSS class of "togglelink".

To make the entire text a link, you can use the jquery "wrap" method:

http://docs.jquery.com/Manipulation/wrap#html

I.e. change the line

$(".toggle").prev().append('(<a href="#" class="toggleLink">'+showText+'</a>)');
to
$(".toggle").prev().wrap('<a href="#" class="toggleLink"></a>');
I haven't tested this, but should work in theory.

Andy said on 26.11.2008. 10:13

@test - what problem occurred? Did you get a javascript error? Are you using external js? It worked fine for me in IE when I tried it.

Tony said on 02.12.2008. 14:06

Hi there. This is an excellent script. Very like an Ajax Accordion that I was looking for, but using JS.

However, is it possible to modify the script so that the previous text is hidden when the next one is shown, more like the way an accordion works?

aguspuryanto said on 03.12.2008. 08:11

i want to replace text "Show" and "Hide" on the script with image. do you have solution?

// choose text for the show/hide link
var showText="Show";
var hideText="Hide";

Replace with:

var showText='';
var hideText='';

Jake Rutter said on 06.01.2009. 16:31

Nice work, your code was helpful in helping me with a script that I was creating.

Lee Amador said on 16.01.2009. 17:12

How can I change the toggle effect to something like slideUp/slideDown? Thanks in advance.

Andy said on 19.01.2009. 15:12

SlideUp/slideDown is straightforward enough, but requires a little modification. First, omit the current toggle display line, then change the show/hide text lines to the below:

// change the link text depending on whether the element is shown or hidden
if ($(this).text()==showText) {
$(this).text(hideText);
$(this).parent().next('.toggle').slideDown('slow');
}
else {
$(this).text(showText);
$(this).parent().next('.toggle').slideUp('slow');
}

Mahzian said on 10.02.2009. 06:18

brilliant, just what I was after (and more, I thought I needed a bunch of different id's and individual click functions)

Thanks muchly!

ca said on 11.02.2009. 14:56

hi, i am traying show/hide difrent images (png). Only i get mess..

var hideText=';
var showText=';

garr, garr

ca said on 12.02.2009. 07:03

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link

var showText='';
var hideText='';



// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().append(''+showText+'');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.togglelink').click(function() {

// change the link text depending on whether the element is shown or hidden
if ($(this).html()==hideText) {
$(this).html(showText);

}
else {
$(this).html(hideText);

}



// toggle the display
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});





Image change only one time :( when hide element, correct image didint showed :(

Andy said on 13.02.2009. 15:52

I fixed the problem, ca - if you use the code in the post it should now work. What changed was using this.html instead of this.text (text sanitises HTML)

Ste said on 17.02.2009. 22:10

I've been trying to modify your code to hide 3 divs and show 1, which divs depending on which of the 4 links are clicked, but I'm having no luck.

Is it possible to do this code or is it tricky to do an operation such as the above?

Andy Langton said on 17.02.2009. 22:56

If you want this to work "accordion" style (i.e. only one of the toggle elements is displayed at a time) then you just need to hide all of the toggle element prior to display.

Add the following directly underneath the comment // toggle the display

$('.toggle').hide();

Instant accordion :)

john said on 06.03.2009. 16:20

Hi Andy,

what a great set of functions -- thanks a lot for your phantastic work!

The only thing that doesn't work for me is your accordion suggestion (17.02.2009,2:56):

The accordion unfolds as expected, but if I click on 'hide', the text doesn't hide but the toggle text just changes to 'show'...

Would be great if you could provide some help.

Thanks again!

KatieB said on 09.03.2009. 01:09

Just a quick note on W3C validating xHTML inline scripts that use characters such as $ and &, if you wrap the content of the script with <!//ript stuff here //]]> it will validate properly.

John said on 11.03.2009. 20:33

Hi Andy and all,

seems my above question wasn't clear enough, so I'll try again -- the accordion suggestion (17.02.2009, 2:56) has a little flaw: If I apply the accordion suggestion with the three example sections above, the accordion just works once (i.e., when clicking on the "show" link of a section, the previous section is getting closed). After that, all three sections have the toggle text "hide", although, after being clicked, the respective toggle link should read "show", not "hide". Get what I mean? Any suggestios on how to solve this?

Cheers, John

Andy said on 11.03.2009. 22:08

Hi John,

Thanks for spotting this. I've adjusted the code in the original post to rectify this problem. The solution is a bit hackish, but is as a result of the original implementation which checked the text of the show/hide link. Give it a go and let me know if it works for you :)

Andy

John said on 12.03.2009. 16:35

Thanks a lot for your efforts, Andy!
I'll get back later tonight with a few comments.

John

Dan said on 16.03.2009. 18:44

Andy, this script is exactly what I have been looking for. I am having a problem using images as the toggle links, however. Everything works great until clicking the "hide" image. The elements toggle correctly, but the original "show" image does not return ("hide" image persists). I think this is the same issue CA had. Am I doing something wrong? Thanks.

Andy said on 18.03.2009. 14:22

To those with problems using images etc. in the show/hide text, I think i figured out the problem. When return the value for the HTML of an element, jquery seems to change single quotes to double quotes - so the solution is for the showText and hideText variables to be contained within single quotes, and any attributes of elements within to be enclosed in double quotes. Who knew?

Dan said on 18.03.2009. 20:40

Andy, thanks for the response. I figured out the single/double quotes issue already, but the script still does not ever re-load the initial image. Everything works correctly, but the "hide" image persists forever. Have you had success with show/hide images?

Aaron said on 19.03.2009. 02:04

Is there a way to have two links for two different hidden divisions, and when you open one, then the other, the first one closes when you open the second one?

Andy said on 19.03.2009. 09:31

@Dan - is this with internet explorer? After a bit of testing, it looks like IE does not return the same value for the inner HTML of element after it's created (it uppercases the tag name for one thing ). I've not figured out how to get around this behaviour yet. I have it working fine in Firefox/Opera with the code above.

@Aaron - it sounds like you mean an "accordion" effect - uncomment the relevant line in the original code and see if that works out for you.

Dan said on 20.03.2009. 12:33

Hi Andy - Yes, the issue only occurs in Internet Explorer. I'd love it if there was a way around this IE bug!

JJ said on 25.03.2009. 07:53

Any ideas how to fix the IE bug?

Andy said on 25.03.2009. 11:26

Actually after some research, it looks like it isn't an IE bug necessarily (it also affects Opera). It seems to be related to the value of innerHTML in certain browsers (see http://andylangton.co.uk/tmp/jquery-html.htm ), but I haven't pinned down a solution yet.

Rocky Patel said on 27.03.2009. 11:31

Hi All,
Just an FYI - I'm new to jQuery.

I want to use the above code for in one of the sections on our Agenda page (http://www.pershing.com/events/insite/agenda/index.html). If you scroll down to 2:30 p.m. - 5:00 p.m. on Wednesday June 3 you'll see "view/hide details" link. I have no issues hiding this single element but what I want is once a user clicks on "View Agenda" it will expand out and on the bottom you'll see a "hide" link. Once the user clicks on "hide" the element will slide up and the text should read "View Agenda". So I guess I need some "onclick" functionality for the "hide" functionality on the bottom. Can somebody please assist. I hope I explained this correctly. Thanks.

Dan said on 27.03.2009. 22:45

Interesting find about Opera, Andy. I know I've seen this effect in other jquery scripts but I'm not experienced enough to offer any help, unfortunately. I'll keep hoping for a solution.

Harsimran Kaur said on 02.04.2009. 06:20

Hi,

Can you help me making the whole text line under or tag making a link so that if I click the whole line it shows and hides the .toggle class content. That simply means that I don't want to use the show/hide text preceding .toggle class.

Benjamin Thomas said on 21.04.2009. 07:48

I would like to use this script, however I don`t want the show/hide link to be created via javascript, since this not accessible. My show/hide link is in the HTML instead, marked with a class. Also my toggled content is marked with a class.

Let`s say I have this setup:


Show/Hide Content

Some content here



How does my script need to look like???

I am always confused with the referencing ("this"). and parent/child..

Many thanks for your advice!

Andy said on 21.04.2009. 10:18

>> I don`t want the show/hide link to be created via javascript, since this not accessible

If the functionality requires javascript (which it does) then writing show/hide links in anything other than javascript is inaccessible, since it means users will see a link that cannot possible function.

If you must hard-code inaccessible links, then you just need to give them a class of "togglelink".

Sunil K said on 22.04.2009. 12:22

This is really great...I am using this script to navigate certain links and is overlaping a form. but when i try this div ie 6 it doesn't overlaps the select box ...any solution for that?

JAY said on 14.05.2009. 21:34

Hi,

To start with I would like to thank author for this script, it is great :)

I think I sorted out the problem with image, which was getting stuck.

The problem is that every browser represents and modifies html code differently.

$(this).html ($(this).html()==hideText ? showText : hideText);

When I tried to look what exactly is inside variables $(this).html() and hideText when comparing, it was different in every browser...

Explorer uses uppercase for tag IMG, Mozzila uses lowercase...

So, I just edited the comparasion line that every string is lowercase:

$(this).html ($(this).html().toLowerCase()==hideText.toLowerCase() ? showText : hideText);


I hope it helped.

Greg said on 26.05.2009. 11:18

Hi Andy
How could I get the hide link to be at the end of the revealed element?
I'm toggling a long piece of text and it would be useful to be able to hide it from a link at the end.
Hope this makes sense.

Cla said on 27.05.2009. 16:09

Hi. Great script!
How can I modify it to give also the possibility to show all hidden text at once with a "Show All" link? and to hide everything again?
I mean is it possible to have both independent and simultaneous show/hide in the same page?
Thanks in advance and again great script!

Andy said on 28.05.2009. 19:23

>> How could I get the hide link to be at the end of the revealed element?

At the moment, the link is appended to the previous element:

$('.toggle').prev().append();

It sounds like you want to append it to the current element:

$('.toggle').this().append();

>> is it possible to have both independent and simultaneous show/hide in the same page

Yes! You just need a link which toggles *every* element with a class of toggle:

$('.toggle').toggle('slow');

Jefte Puente said on 05.06.2009. 17:23

Thank you Andy! I was tearing my hair out having to write individual bits.

AU said on 06.06.2009. 21:46

Andy - thanks so much for this!

For my website, I needed the whole text to be the link, so I've adjusted your code to do this. You can then set CSS styles to the text.

/*---





Here's your text!




--*/

kampie said on 18.06.2009. 22:12

Great script Andy, thanks!
If I would want to show/hide a div element that is not immediately following the link, would that be possible?

James said on 03.07.2009. 16:59

Hi Andy,

Great script, I've already found a couple of uses for it but on one site, I'm stuggling to get it to simply wrap the link around the preceding paragraph and changing the line you mention in about the 3rd comment doesn't work properly.

Any ideas how I would simply make each question here http://tinyurl.com/m55atn into a link rather than having the show/hide text?

Cheers!

James.

Money Off Shop said on 13.07.2009. 00:19

Hi Andy - great piece of code :) Thanks for a nice hide/show jquery example - easy to understand and follow :) I'm interested to know though if it would you be possible also open a new browser window at the same time as the element is revealed by clicking on ‘Show/Hide’ action please?

Xavier Riley said on 15.07.2009. 08:25

Hi Andy,
This script is mega, just what I needed but I can't get it to work properly with images instead of text.
The images themselves display just fine, but when I click 'hide' the graphic doesn't change. I think its something to do with the logic checking for innerHtml (ie some text) for an image? In the line following this comment "// change the link depending on whether the element is shown or hidden". Any ideas? Thanks again for a really useful script.

Xavier Riley said on 15.07.2009. 10:48

Ok I solved my own problem with it but it'll be tricky to demonstrate without being able to type html :P
If using an img instead of text for the showText and hideText variables, make sure they don't have a / before the last bracket, as jQuery strips this making the variable different from the innerHTML. This means it always shows the 'hide' img after being clicked for the first time.
To see what i mean, use an img with a self closing tag (ending '/>' ) then put alert($(this).html()); in the function and see the difference.

John said on 22.07.2009. 13:09

I'm having the same problem as Xavier: when I first click the link ("Show +", where the + is an image), it changes to "Hide -", but then will not change back if I click again.

The accordion still works, but the hideText link fails to change. I only find this issue in Internet Explorer 8 (it well could be in older versions). Firefox works perfectly.

One bug I found with Safari is that when the element with the class "toggle" is animating into view, it pushes my page layout horizontally, making the horizontal scroll bar appear for a few milliseconds.

Still, this is an awesome script that is much easier to use and much more accessible than others I've seen.

Greg Malkin said on 27.07.2009. 16:53

Great job on the script! :-)

Could you please help me with something? How can I insert the show/hide links somewhere other than just before the 'toggle' div?

I'm integrating this into a table to show/hide a table row and as it is, the links are being added into the preceding row () whereas I need them added into the cell () before the following closing tag ()

Any ideas on how I could do this? If you can help i'd be very grateful. My email is greg@dekken.co.uk.

thanks,
Greg.

Andy said on 04.08.2009. 18:47

For those with problems using html for the show/hide links, take a look at http://andylangton.co.uk/tmp/jquery-html

What's happening is different browser return different values for html(). I didn't see any easy solution to this, but the options I looked at were:

- "Normalising" the output from html() (seems tricky when IE re-orders attributes in the img element!)
- Using a different check for visibility (is_visible or something similar?)

If anyone gets either of the above working, I'd love to see the code :)

madhu said on 14.08.2009. 08:54

Hi,
jQuery
google


i need alert message for both the links diggerent can u pls.

thank you

Lothar Velling said on 14.08.2009. 18:09

Thank you very much. Still fiddling a bit with the CSS alignment, but some work has to be left, doesn't it?

Basilakis said on 21.08.2009. 17:01

Excelent script, but neither a download link, not a good way to pass that in a web site.

Needs more documentation...

Ferry Helmich said on 24.08.2009. 11:21

Hi,

There seems to be a bug with margins in Internet Explorer when the "Hide" button is pressed. Does anybody know how to solve this problem?

You can see it here: http://www.plazaitalia.nl/bestellen

I hope somebody can help me out!

bytor said on 01.09.2009. 07:54

Hi Andy I tryed to use image instead of text but it didnt work.. any help on this..

var showText="";
var hideText="";

jordan said on 02.09.2009. 13:51

Great script, Andy. Thanks for putting it together. I'd like to use it in a situation where the element preceding the div to be hidden is a link, but this method of appending the hide/show link to the previous element seems to cause the hide/show link to activate the previous link as well when hovered. Does that make sense? When I hover the dynamically created "hide/show" link the "direct" link also appears hovered. My setup is like this:

link to go directly to the content
Description of the content

Thanks in advance for the help!

jordan said on 02.09.2009. 13:57

PS. It's early and I'm not using my words very well - what I'm looking for is to add the hide/show link AFTER the closing tag of the previous element, rather than placing the hide inside the preceding link.

Thanks again- J

Lu said on 10.09.2009. 05:45

Nice, thanks! How about taking showText and hideText from the HTML code? That would make the script more universal?

Victor said on 16.09.2009. 22:21

I'm seeking for a method to show or hide all toggle elements regardless of whether they are currently showing or hidden.

The trigger for this global hide/show would read "show all" or "Hide all" depending on status.

Am continuing Googling and experimenting and will post results if unearthed.

Juraj said on 19.09.2009. 22:34

Thanks to Andy's suggestion I managed to solve the whole image changing problem:
1. create a new variable:
var is_visible = false;
2. add the following right at the beginning of the click function:
is_visible = !is_visible;
3. change the condition which sets the text to the following:
$(this).html( (!is_visible) ? showText : hideText);

Brice said on 03.10.2009. 08:53

Sorry for the noob question...

But is there a way to use the "Show" and "Hide" on an existing image? I already have an image that, when clicked, will trip the jQuery and open the 'toggle' div. How would I do that?

Thanks!

Jon said on 31.10.2009. 16:23

thank you, it works.

Ben said on 04.11.2009. 10:24

Sorry to be posting what I imagine to be a fairly basic question. I'm having a problem with multiple instances of the show/hide link being created.

I'm using the following script to autoload content in the style of the Facebook wall:
http://9lessons.blogspot.com/2009/07/load-data-while-scroll-with-jquery-php.html

The problem is that each time the script fires to add new content, each previous show/hide anchor has another one added to it, with only the final itteration of it working correctly.

How can the script be modified to avoid this - presumably detecting where the togglelink class has already been appended.

Many thanks - this is a really useful script.

Ben

Andy Langton said on 05.11.2009. 17:47

Ben, it sounds like you may have a problem that would be solved by the Jquery "live" event:

http://docs.jquery.com/Events/live

Mark said on 26.11.2009. 11:36

Here's a video tutorial which I've just found on the web which eplains show/hide effect: http://www.sebastiansulinski.co.uk/web_design_tutorials/tutorial/52/show_and_hide_div_with_jquery

Colin said on 26.11.2009. 14:45

Hi
There seems to be a problem with the text in IE it looks different to the "unhidden" text, lighter and rather spider like. Ok in Firefox of course.

C

Ahsan R. Shami said on 30.11.2009. 01:05

I've read through the comments a few times and haven't found a way to make the preceding text a link, though the question's been asked a couple of times.

The WRAP suggestion didn't work, at least not what I copy/pasted.

In a nutshell, I'd like to keep the show/hide links that the code creates, but I also need the text that it's appended to changed in to a link.

Help?

The Googler said on 02.12.2009. 19:31

Hi,
Excellent script.

Is there a way open one of the divs with an incoming link? I want to reference it by id so I could have links like: http://www.myurl.com/test.php#12

It would open the toggle div that had the id of 12 and left the others closed.

Just wondering if this is possible, and if you could help me out, Thanks!

Ramesh said on 05.12.2009. 05:12

Amazing script!!! Thank you very much....

Disco said on 10.12.2009. 17:05

Hi, Thanks for this code it really adds something extra to a blog. I saw Tony's comment about only showing one div at a time which I know is pretty tough in blogger. I also wanted to acheive something similar where one div opens and the other one closes automatically. I have just about managed to do it and have used the javascript code (as untiday as it is) to create menus on my blog which open tabs. Have a look at my post about the Funk Band WAR on my blog http://disco.funk-atuneaday.blogspot.com for an example. I challenge anyone to try and tidy up the code a bit so that it still works on blogger. Perhaps you might want to do a post on this cript Andy?

Mark said on 23.12.2009. 18:54

Thanks for this script Andy - definitely what I was looking for. I do seem to see one little issue that no one else has commented on:

When the page loads in IE (IE 7 at least), the divs are briefly shown -- they disappear after the page completes its load.

Do you know of any way to hide these earlier so user don't see the text initially?

Behavior is consistent both on my test version of your script and on this page itself.

Thanks!

Elias said on 23.12.2009. 21:03

Hey there,

Great script!

I'm finding that the "show" link doesn't change over to the "hide" link after clicking.

I have set it up to work accordian-style if that's relevant.

Any ideas?

morvi said on 10.01.2010. 23:46

Great tool!

I am a newby - my first jquery thing - and still manage to
a) included am image
var showText=' ';

b) Show All and Hide All

$(document).ready(function(){
$('a.hideAll').click(function() {
$('.toggle').hide();
});
$('a.showAll').click(function() {
$('.toggle').show();
});
});

and the html ...
Show all | Hide all
NOTE: is not perfect - the [+] and [-] gets mixed up - but I use the same image for both - so I'm happy ;-).

Tracy Chamblee said on 16.01.2010. 16:04

Perhaps I overlooked something here, but it would be nice if it were clearly (& noticeably) spelled out that:

"The code" above needs to be placed in the body tag to work.

Also a direct link to jQuery pack 1-2-3 would have been nice to mention. The direct link:
http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js

The page with all the jQuery 1-2-3 files:
http://code.google.com/p/jqueryjs/downloads/list?can=1&q=jQuery-1.2.3

Hope this helps someone, as these were the two dilemmas I ran into myself.

Works like a charm now, absolutely beautifully!

Many Thanks! :)
Tracy

Tracy Chamblee said on 16.01.2010. 19:04

I have noticed that the script displayed on this page (http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/), is different compared to the script you are actually referencing that's in the source.

The script Copied From the Page is glitchy. Sometimes the text 'show' does not swap to the text 'hide'. And sometimes if it does, it does not swap back. You can see it for yourself here:
http://www.flipflopmedia.com/test/TogglePage.html
Simply click to expand/contract each element back and forth to see the glitches for yourself and what I'm talking about.

The script Copied From the Source is here:
http://www.flipflopmedia.com/test/ToggleSource.html
Has no problems whatsoever.

Here's my problem. Trying to implement an image:
script in the example is Copied From the Source
http://www.flipflopmedia.com/test/ToggleIMG.html
I changed the following section (along with adding the image tags in ShowText/HideText)

// change the link depending on whether the element is shown or hidden
if ($(this).html()==hideText) {
$(this).html(showText);
}
else {
$(this).html(hideText);
}

IF I use the script Copied From the Page, I can get the image to swap back and forth, when it wants to; it's glitchy, as I said.

IF I use the script Copied from the Source (as it is right now on ToggleIMG.html, the image does not swap back to it's original "show" state.

This is just a test toggle image, not the one I would like to use.

I would also like to know how to make this image proceed the text, vs. append? I tried the 'wrap' suggestion and it did not work?

I'm about ready to give up on the whole idea and just use Show/Hide actual text at the end of the text!

Thanks,
Tracy
mac_major@mac.com

Meridyth said on 07.02.2010. 18:45

Thanks for this, spent ages trying to get something like this to work. very helpful post!

JMB said on 23.02.2010. 19:05

Your toggle resets my CSS formatting, specifically DIV padding.

Any way to get around this ?

John r hopkins said on 04.03.2010. 18:19

This is exactly what I've been looking for. Perfect.

However, I must be missing something. I'm using wordpress and thesis as a theme and something seems to prevent it from doing the show/hide bit.

Here is where I'm trying it. I've applied the toggle class to the unordered lists below Utah and Georgia.

And nothing seems to be working :( Any thoughts as to what I might be overlooking?

John r hopkins said on 05.03.2010. 00:22

I found the solution. Thought I'd share the solution. Since Wordpress 2.8 uses a modified jquery in order to avoid conflicts, all calls using "$(" need to be changed to "jQuery(".

I tried it and it works right away.

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
jQuery(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
jQuery('.toggle').prev().append(' ('+showText+')');

// hide all of the elements with a class of 'toggle'
jQuery('.toggle').hide();

// capture clicks on the toggle links
jQuery('a.togglelink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
jQuery(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//jQuery('.toggle').hide();jQuery('a.togglelink').html(showText);
jQuery(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

wanderingdays said on 07.03.2010. 20:48

Thanks for the instructions. I found a minor issue with the is_visable. Hard to describe, but the following fix should tell something.
Changing this:
$(this).html( (!is_visible) ? showText : hideText);
to this:
$(this).html( $(this).parent().next('.toggleSection').is(':visible') ? showText : hideText);

Gabriel Lora said on 14.03.2010. 19:21

Hi!

I am having problems with this script. The script is to some working to some point (because when I click the link, the word show/hide toggles), but the p.toggle is not showing/hiding...

Can anyone please help?\

(next to the 1st pic, where it says + info, that's the link above the p.toggle)

http://gabolora.com/stereoptico/artists.html

Vin Thomas said on 17.03.2010. 05:33

This is a great script. I find it very useful. But I am having issues on one page. If I toggle several of the divs on this page (http://wsfc.org/im-new/who-we-are/) I am getting some strange behavior. Sometimes it opens fine, but when I close it the toggle image gets reversed.

Any clues on how to solve this?

Jen S said on 22.03.2010. 08:20

Thanks a ton! This works like magic. I'm a long-time coder but new to jquery. I was trying to figure out how I was going to get each one of my post's comments to show and hide without making a million different functions. I'm still having some trouble with IE (The div starts to show, and then changes it's mind halfway through) but I think the answer is probably in the comments. I'll take a look. Thanks again!

Lori said on 22.03.2010. 17:13

These hide/show links are great. I did notice, however, that when I turn off CSS, the hidden text is shown, but the toggle link says "show". When I click it, the text hides and the link then says "hide". So basically when CSS is off, the links say the opposite of what they should. I'm trying to make this feature as usable/accessible as possible so any help would be great.

Alex said on 03.04.2010. 21:16

How can I have the first div be open on page load. Otherwise all DIVs are hidden. I would like the first one to be open when entering the page. Thanks.

Jack said on 04.04.2010. 16:50

Thank you!

Jon Ligi said on 05.04.2010. 17:46

Really easy to use and works very well. Thanks for sharing!

whebz said on 16.04.2010. 09:25

is it possible to hide or show the div tag depends on a textbox value?

Steve said on 22.04.2010. 17:26

Hey Andy,

Great script, this is just what I was looking for.

I had a few issues, but it was nice to see that you actively respond to comments and provide "support".

I just wanted to mention that JAY's (14.05.2009. 21:34) suggestion fixed one of my problems. When using multiple Show/Hide (for synopses in a knowledge base) it would not toggle to the correct word. It seemed to track the last toggle overall rather than the setting for each link. In other words, if I clicked show on the first article, it would change to hide. If I pressed show on the next article without hiding the previous, it would stay at show, and if i try and hide the first article now, that word remained hide.

I guess this has been really wordy and maybe confusing, but all in all great simply script, it is much appreciated.

Marie Kyle said on 22.04.2010. 22:13

thank wanderingdays! the page i was working on (4evermarriages.wearehenrykyle.com/faq) kept having this weird issue. I have multiple show/hides going on, but everytime you clicked in a new 'show' link to reveal text, the word 'hide' would only update on every other click. Changing this:
$(this).html( (!is_visible) ? showText : hideText);

to this:

$(this).html( $(this).parent().next('.toggleSection').is(':visible') ? showText : hideText);

fixed the issue. thanks again!!

Mat said on 23.04.2010. 17:26

How can implement COOKIE, for remember state ?

This source is clean, i like! Thanks for advanced!

jay said on 28.04.2010. 07:28

Hey do you mind if I use some of this content on http://www.basicwebdesign.co.cc in exchange for a link back to your site? Thanks

Eric said on 05.05.2010. 18:14

Thank you for sharing this code! Exactly what I needed for a project I'm working on.

RickA said on 13.05.2010. 23:08

Andy,

Works nice unless I want more than one paragraph or and unordered list. Then it doesn't hide the part after the paragraph break. Is this an easy fix?

benjamin holland said on 21.05.2010. 00:55

another real easy way of doing this is ....


$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});




question
answer here.

gabe said on 21.05.2010. 21:52

I have the same problem as Ben. I'm applying this great script to a search engine results page. If I get 4 results I get for instances of "show" with only the last one working properly. If i get 10 results I get 10 instances of "show" with only the last one working properly, etc.

I have read up on jquery .live() and do not see how it can solve this problem.

Thank you very much Andy.

Russ said on 25.05.2010. 20:58

@RickA I implemented the code in a content management system for a client. Ease of use is a must, so I settled on using a div container with the toggle class. All of the paragraphs and lists falls in properly without random "Show" links throughout.

Might not be perfect right away, but with some CSS, this method should work for your needs.

Ken said on 02.06.2010. 22:37

great script. Exactly what I was looking for. Thanks a bunch.

Michael said on 16.06.2010. 02:45

hey Andy, I really like what you have done here. very impressive. only thing I wanted to know is. how would you assign a cookie onto to your js so if I was to click away from this page and then back again the page would remember the selection as in the page would still show the paragraph div named toggle. Michael

Mitch said on 28.06.2010. 11:42

Ok, so if you want to have your own text for the toggle you need to hardcode the class "togglelink" onto the a tag that's required and then use the following code in your script...

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// initialise the visibility check
var is_visible = false;

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.togglelink').click(function() {

// switch visibility
is_visible = !is_visible;

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.togglelink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Niconemo said on 29.06.2010. 10:48

Could not achieve to make the whole line a link instead of a "(show)" link as several persons want to do…

So I made it via some quite basic CSS :D
(100 % accessible of course and very customizable !)

.togglelink
{
display:block;
position:relative;
text-align:right;
margin-top:-1.2em;
z-index:99;
background:none;
color:#FFF; /* your background color here */
}

Greg said on 08.07.2010. 09:54

This all seems overly complicated. I achieved the same thing in a much simpler way.

I have a div with a class of "content" which contains my FAQs and then each title (the part people click on) is wrapped in a then the content that shows and hides is in a tag.

$(function () {
$("div.content div").slideUp(0);
$('div.content p').click(function () {
$(this).next().slideToggle(500);
});
});

Michele said on 10.07.2010. 12:02

I am the only one I couldnt get it to work fine; It 's everything ok but I cannot understand why I am getting This:
Section one: a div with a paragraph (Hide) (Show)

You can show/hide an entire div by giving it a class of "toggle". links and other child elements will work fine too. The element directly before this one is a heading, so it gets a show/hide link appended.
Section two: single paragraph (Show) (Show)

A single paragraph can be hidden by giving it a class of toggle too. I can't help but be impressed by how easy it is to use jquery - even for someone with limited programming and javascript experience like me. Again, the preceding element is a heading.

Now: a list (Show) (Show)

I mean, I get two links : (show) (Show) or (hide ) (hide)

Thanks anyway

Michele

Michele said on 11.07.2010. 23:42

this is the code is pull out from your script: Section one: a div with a paragraph Learn More Learn More Learn More Learn More Learn More any idea why?

Simon said on 15.07.2010. 22:00

Colin: "There seems to be a problem with the text in IE it looks different to the "unhidden" text, lighter and rather spider like"

Me too - it's the weirdest thing. I read your comment and just assumed you didn't know much about CSS (sorry!), but then checked it out myself in IE7 and was amazed. I use Cleartype - it seems that everything in the revealed div has Cleartype removed. A quick Google reveals this to be a known issue, specific to the combination of jQuery's fadeIn/fadeOut / Cleartype / IE7. There are some fixes out there, but none of them are as simple as I'd like... oh well.

Thanks a million for the script, anyway, Andy.

Neil said on 26.07.2010. 12:21

This is great - how would you tweak it so that showing one div hides the others, so that only one div is ever visible at a time?

John Sharp said on 09.08.2010. 04:49

Great piece of code - thanks!

I needed something that would work for a ton of auto-created tab panels - came up with a simple version of this that may be of interest to others...

Step 1: Make all the divs you wish to control class='toggle' and make each style='display:none;' except the one you want to show on page load

Step 2: Iterate this for each tab and div you need to hide/show

$().ready(function() {
$('#link_show_1').click(function() {
$('.toggle').hide();
$("#div_show_1").toggle();
return false;
});
});

Andy said on 13.08.2010. 15:55

Thanks a huge stack! I've been using the css hidden value, which doesn't show up in SEO or with javascript off, so this is perfect!

Rayaan said on 18.08.2010. 12:10

Hi - thanks for the script - great work. We're using this script as a menu and searching for a possibility to have a special toggle-section opened on page load. Any idea on how to solve this? Thanks for help, Rayaan.

Fred Riley said on 25.08.2010. 15:47

Thanks, Andy, that was just what I was looking for. I was after displaying search results in brief with a [more] link toggling to [less] but couldn't figure out how to do it for multiple elements independently, short of giving each element a specific id which is clunky. Your script does the job perfectly, and has saved me some hours of trial and error. Much appreciated :)

Chuck said on 26.08.2010. 02:42

Awesome! I am using it for a FAQ page. I do have a question. I attempted to use $(".toggle").prev().wrap('); to use my question as the link that opens the answer. However, instead of the answer I get the Show link and Hide link, which do nothing really. Any ideas on that? Tested in IE7, IE8, Firefox.
Thanks in advance!!!

Steve Haiman said on 08.09.2010. 12:11

I am still stuck. I have everything working beautifully (thanks) but want to have one div open by default with all of the others closed. I have tried John's script loaded at the bottom of the page and it doesn't seem to work. How do I have one panel open by default and all of the others closed?

melissa anderson said on 21.09.2010. 17:10

if this helps, instead of using the is_variable var, which makes the swapping of hide/show/images glitchy try this

replace this
is_visible = !is_visible;

with this
$(this).toggleClass('visible');

and replace this
$(this).html( (!is_visible) ? showText : hideText);

with this
$(this).html( ($(this).hasClass('.visible')) ? hideText : showText);

ralimadhu said on 22.09.2010. 04:45

Thanks a lot, can you give other animation examples..

2web said on 25.09.2010. 19:40

Thanks a lot...............................................
script is great!

elibutcher said on 28.09.2010. 03:56

I'm extremely new to jQuery, and I really like this sample, but I current scenario on a site I'm building, and I can't figure out how to get my nav to work properly.


'this part contains 6 image buttons'


'this contains 5 image buttons.


There are 6 seperate "itemScene" divs, one for each of the first set of buttons. Each "itemScene" divs contains its own 5 buttons.

What I want to do is be able to click on a "itemNav" button, and have the appropriate "itemScene" div show, and the others hide.

I've tried several ways, but nothing seems to work. Could someone please help me.

Thanks

JR said on 28.09.2010. 11:14

How would I add cookie support to this?

Eric P said on 01.10.2010. 08:25

Good stuff. Thanks to Andy for sharing and starting the thread. I borrowed some ideas here and applied to a toggle solution that I had already created. I use livequery cause it irons out bindings as applicable. I'm all about the show me, copy/paste stuff, so here's mine:




Show Details

Hello world. Hello world. Hello world.

Show Details

Goodbye world. Goodbye world. Goodbye world.



/* livequery info:
http://www.99points.info/2010/06/live-query-plugin-solution-of-your-problems-in-jquery/
http://plugins.jquery.com/project/livequery
*/
$(document).ready(function() {
var ShowText = 'Show Details' ;
var HideText = 'Hide Details' ;
$('a.toggle')
.livequery('click', function(event) {
var elemID = '#'+$(this).attr('rel');
if ( $(elemID).is(':hidden') ) {
$(elemID).show('slow') ;
$(this).html(HideText); // optionally comment out
} else {
$(elemID).hide('medium') ;
$(this).html(ShowText); // optionally comment out
}
return false;
});
});

Shawpnendu said on 03.10.2010. 11:37

Yes. I found its OK for every browser. Thanks for this great article.

Mike said on 14.10.2010. 01:26

Great script, thanks!

Is there a way that I can use a class other than toggle? eg; I already have styles applied to the things I want to show/hide.

I tried just changing all instances of .toggle to my class but that didn't seem to work.

It's not a huge deal, I can just duplicate my class and call it .toggle, but just thought I'd ask.

AK said on 19.10.2010. 09:47

Great, thank you so much – simple code that works. I appreciate your efforts!

etoileweb said on 01.11.2010. 15:02

Hi Andy, great work, just what I was looking for. Work fine on IE6, even the slideUp/SlideDown.
I'd like to know how to setup the initial state of individual divs. For instance, i want only the first div to be hidden at the page display, what do I need to do ? Thks

Punarvasu said on 04.11.2010. 06:01

Thank you all for the script.. :)

namanna said on 08.11.2010. 06:11

var curid = 0;
var id = ['a', 'b', 'c', 'd'];

function showNext()
{
if(curid < id.length-1)
{
document.getElementById(id[curid]).style.display = "none";
curid++;
document.getElementById(id[curid]).style.display = "block";
}
}

function showPrevious()
{
if(curid > 0)
{
document.getElementById(id[curid]).style.display = "none";
curid--;
document.getElementById(id[curid]).style.display = "block";
}
}





hello
good morning
good afternoon
good evening

Previous
Next



tis code is in javascript n it works properly...can anyone help me to do it in jquery??

adastra said on 08.11.2010. 14:08

Thank you for this great snippet!

I'm having a little trouble in modifying to expand the :first element by default. Doing that itself is actually no problem, but I can't figure out how to set the first Show/Hide link to "Hide". Right now, it still shows "Show" despite the text being expanded. Any ideas on how to solve this?

Sokos said on 13.11.2010. 18:42

Hello Andy,

and THANK YOU for your most helpful website!!

Can you please let me know if what I am trying to achieve is even possible?

I really need to find a way to show/hide (via slide function) 2 separate divs located in different parts of the page with a single click on ONE visible link. Importantly the divs are independent of each other and have different content. I just need them BOTH to show and disappear when clicking on ONE link.

All the solutions I have seen so far only allow to activate 1 div per link.

Can you please help?

Alexander Christensen said on 18.11.2010. 09:43

This is a great code.

But is there anyway toggle can start being open instead of closed?

Looking forward to hearing from you guys.

Alex

Tim Meredith said on 06.01.2011. 09:46

Great code, I like a few others wanted to make it so the title was the link instead of having "show or hide"

Andy was right to change this:
$(".toggle").prev().append('('+showText+')');
to
$(".toggle").prev().wrap('');

However, I hid (made comments) out of showtext and hidetext vars, as well as
$(this).html( (!is_visible) ? showText : hideText);

(basically you can delete these):
//var showText='Show';
//var hideText='Hide';
//$(this).html( (!is_visible) ? showText : hideText);

AFTER THAT:
To make it so it works you need to change this:
$(this).parent().next('.toggle').toggle('slow');
to this:
$(this).next('.toggle').toggle('slow');

Works on my page listed above, I hope that makes sense, if you have any questions email me at tpmeredith@gmail.com

Yarp said on 24.01.2011. 02:34

Hi, thanks for the script.

I have modified this a bit, but it's more or less the same as you have outlined.

But what I am noticing is if I "Show/Hide" multiple items on the page going backwards, the page "loses track" of what is open and what is closed and starts displaying the "Closed" text when it should be showing the showText when it should be showing the hideText...Any idea what would be causing that?


var showText='Read More';
var hideText='Close';
var isVisible=false;
$("div.persp p").after(''+showText+'');
$("body.perspectives a.toggle").click(function() {
isVisible = !isVisible;
$(this).attr("title", (!isVisible) ? showText : hideText);
$(this).prev("p").find("span").toggle();
$(this).toggleClass("reveal");
return false;
});

Kellie said on 24.01.2011. 13:30

Thanks Andy and to all who added in code/ adjustments, it has really helped me.

Yuzer said on 27.02.2011. 14:35

Can you apply this code on Textarea? that is if you have 1 row of textarea and you make it smooth animate to have 5 rows.

Joey said on 03.03.2011. 12:35

I found a solution to the problem in some browsers, where the layout of the whole page glitches, and a horizontal scrollbar appears for a fraction of a second, when clicking "show". I had to give the div I used a fixed width in my CSS. After that, it worked like a charm. Hopes this helps someone.

Ariel said on 08.03.2011. 22:52

Thanks for sharing Andy. Great stuff.

I was able to create a button like link by styling a and making some minor changes to the script.

HTML
Foo





JS
switch toggle action from prev() to next('.action')
$('.toggle').next('.action').append(' '+showText+'');

switched toggle display from next() to prev('.toggle'):
$(this).parent().prev('.toggle').toggle('slow');

CSS
leverage "display:block" on .togglelink

Thanks again for sharing.

Tim said on 04.04.2011. 17:02

I ran into a problem with Firefox when I use this script for more than 5 or 6 divs. Page anchors work within the page, but when hyperlinking to an anchor from a different page it just scrolls all the way to the bottom. Stragly it works with all other browsers I have tested (IE, Safary, Opera), but not Firefox.
Does anyone have a solution for this problem? I'd appreciate any help.

Sarah said on 11.04.2011. 20:02

This solution seems to be the best one I can find for toggling multiple sections independently on a page and i think it works really well. One problem I'm having though is a weird "flicker" and it pushes content to the left out before "retracting." I'd prefer that the toggled content just appear underneath the link.

I'm using this in a with an unordered list of items creating a pseudo table within the .

To put it in context, I have a table that lists a number of zip files. This table lists the files contained within the zip files when the toggle is activated.

I have the encapsulating ,td> set to a fixed width and the list items all have specified widths (as well as a containing div) as well. But for som reason, I cannot keep this td from pushing the table cells to the right over when it loads.

Does anyone have any ideas on how to fix this?

Here is my CSS for this section:
#list{display: block;}
.listheading {margin: 0;}
.listheading ul li{display:inline;}
.listheading li {
margin: 0 15px 0 0;
padding: 0;
float:left;
}
.listbatch {padding:0;
margin: 10px 0 0 0;
list-style-type: none;
width: 350px;
}
.listbatch ul{clear:both;}
.listbatch ul li{display:inline;}
.listbatch ul li a {padding: 0;
margin: 0 15px 10px 0;
float:left;
}
.listbatch li.sn a, .listheading li.sn {width:60px;}
.listbatch li.st a, .listheading li.st {width:125px;}
.listbatch li.user a, .listheading li.user {width:80px;}
.listbatch li.extra1, .listheading li.extra1 {width:80px;}
.listbatch li.extra2, .listheading li.extra2 {width:65px;}
.listbatch li.extra1, .listbatch li.extra2 {
margin: 0 15px 0 0;
padding: 0;
float:left;
}


------ HTML ------

zipname

• Serial


• Status


• Assigned To

• SN000000


• st


• username

keyuri said on 12.04.2011. 13:37

nice show hide jquery

thanks for sharing

Simon Day said on 15.04.2011. 11:08

Thank you so much for this. Trying to find the exact script to show/hide multiple elements on the same page was driving me nuts!

Bike said on 24.04.2011. 13:13

Excellent script!

Just wondering if this is possible, and if you could help me out, Thanks!

lux said on 10.05.2011. 21:24

Thanks for the code!
and
@Tim Meredith thanks for the revision for the links, works great!

I see a lot of people still have a problem with only one being open at a time, which I also am still having. Hopefully someone can figure this out.

Jessica said on 12.05.2011. 22:40

I saw the comments about appending the trigger link to the .toggle container, but I'm trying to move it below all of the text and I can't get it to work.

Basically I want to achieve this:

Headline
Paragraph text
- (show)

and then have it turn into this:

Headline
Paragraph text
Toggle content
- (hide)

Dan said on 13.05.2011. 11:36

Is it possible to make the accordion style to change the text to hide and to also be able to hide it once opened and not just by opening another section?

Thanks

Tejas Sali said on 19.05.2011. 15:42

Thank you for saving my day! Very very helpful script.

Joe said on 19.05.2011. 16:04

In Internet Explorer, if you have:

DIV A (SHOW)
DIV B (SHOW)

As soon as you open and then close DIV A, DIV B realigns incorrectly close to DIV A. I tested it on your examples above, and it does it. If you click anywhere though, it readjusts itself. Has this been brought up already? I read all comments, but didn't see anything.

Pete Alston said on 20.05.2011. 17:29

Andy,

Great script - Thanks!!

For those who have been trying to utilise accordian functionality, I changed the code to this and it works ok for me (both Firefox and IE):

// capture clicks on the toggle links
$('a.togglelink').click(function() {

//If any toggle boxes are open, close them and set the links to open
$('.toggle').slideUp('slow');
$('a.togglelink').html(showText);

//Open the toggle box that has been clicked and set the link to close

$(this).parent().nextAll('.toggle').slideDown('slow'); $(this).html(hideText);


// return false so any link destination is not followed
return false;

});

gatorhost said on 21.05.2011. 14:43

great article , but how to pass more than div id or class to the $() function ?
thank you

Shaan said on 25.05.2011. 12:53

Hi can i get the full code please

Lamar said on 26.05.2011. 16:09

I can't get anything to work. My code is below:





// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' ('+showText+')');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.togglelink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.togglelink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});



Kelvin Guevara
Chief Executive Officer



Since his mid-teenage years, Kelvin has developed a heightened sixth sense for business that he now leads WiziCast with at 27 years of age. Beginning at seventeen, Kelvin headed his own [Guevara Landscaping] company, in Larchmont, New York his senior year of high school through the end of August 2002, when he left to begin college at SUNY Cobleskill. Only spending one semester at SUNY Cobleskill, Kelvin returned home to enroll at Westchester Community College where he continued to study Business Administration until the end of his freshman year.

Simultaneously, that semester Kelvin met Ian Padgett, a Brooklyn, NY music producer who taught him basic song structure, and rhyme techniques. Applying what he learned with Ian, by 2006 Kelvin worked three years with Justin Washington [WiziCast COO] to co-produce two albums and one mix-tape, produce four solo performances, and book one guest appearance. During this time, Kelvin operated under the name Clayborn Records™ [throughout lower Westchester, NY], which is now a Clayborn Entertainment Group™ company, and produced a number of additional songs through Static Productions, achieving chart positions of 31 and 65, of a million-and-a-half plus songs on soundclick.com.

At the start of 2007, Kelvin enrolled at Full Sail University to begin his studies of, and earned an Associate of Science Degree in Recording Arts. It was during this junior year that Kelvin formed the idea of WiziCast, and the concepts it operates on today. By Spring 2009, Kelvin had earned a Bachelor of Science Degree in Music Business Management and Media Arts.

In summer of 2009, Kelvin moved back home to Westchester, NY to team up with long time friends Justin Washington, COO, and who also heads the studio division of WiziCast; Matt Sullivan, Executive Director of WiziCast's Richbell Pictures™, and Lamar Williams, WiziCast's Web Designer. As of Spring 2011 Kelvin Will have managed two musical acts native to Orlando, and Miami Florida, produced forty-five songs, co-produced eight promotional videos, one music video, filmed six concerts and artist performances, and landed four celebrity credits for WiziCast.

Website laten maken said on 01.06.2011. 14:33

This is a great tutorial …one of the best I’ve seen from you yet. I really appreciate you sharing your inside tips and
tricks…

Ruaridh said on 18.06.2011. 15:37

Hi there,
Having an odd problem on my Wordpress usage of this (already have it working elsewhere with no issues). I've followed the modified WP code as per comments but although it hides the text and shows the toggle, the toggle isn't clickable - see http://www.dnisi.com/?page_id=136 ? Any ideas?

Tennar Sanal Hayat Teknolojisi said on 20.06.2011. 14:31

i couldnt do it for my website Tennar Mantar on left

RhealPoirier said on 21.06.2011. 15:51

I know this is an old article but your demo source code and your code are very different. If people were to copy and paste the visible code from this page and if they clicked to open two sections the show/hide text will not function properly (because the variable "visibility" is global as opposed to per section.

Filipe said on 29.06.2011. 22:39

Thanks for the code!
Greet's from Brazil!

Kossi said on 30.06.2011. 05:58

Great Stuff!

Dave said on 01.07.2011. 20:41

Thanks for the post Andy. It works well except I'm also having the same problem Yarp is having. I've got this implemented on a couple of sections (sub-categories) of a page. When I have them all open and start to close the bottom one then the "Show/Hide" text gets confused and displays the opposite of what it should do.

Graeme said on 06.07.2011. 16:34

Hi Andy

Very nice implementation! I've added the jquery show-hide option to the text on my index page.

One question though... Safari shows this the way I want (taking up as little space as poss). Other browsers leave a massive gap under the last show/hide heading. Have a quick squint at www.drivings-cool.com and you'll see what I mean.

I'm using a matching column script so the page so all the columns in my 3 column layout are always the same size (the sides of the windscreen grow to match content in centre column). Maybe this causes the prob, but as I say Safari looks ace, but the likes of firefox and IE give me a small abyss beneath my content...

Suggestions?

nathan said on 27.07.2011. 20:45

Hi I need a script like this that will show a soesific table row when a specific selection is made from a dropdown.

Can this do it

Karen said on 01.08.2011. 21:23

How do I make it so that I can click on the whole line to show and hide information instead on having to click on "show" and "hide". Please email me at karen@karencrowondesign.com

ofca said on 11.08.2011. 08:11

can someone tell me how to use it in .haml file?
I wrote:

%a.togglelink(:href => "#") press here!
%p.toggle text text text

but it gives me nothing :/

Alex said on 13.08.2011. 04:22

Nice work, your code was helpful in helping me with a script that I was creating.

Lostie said on 16.08.2011. 12:43

Some people in the comments above were looking for a way to get the link on their dynamically created href instead of having a Show-Hide link. So I just tried to do that and found a solution that works fine for me.

So here is the html I used:




Whatever
Whatever


Whatever
Whatever

...


Then I created a dinamic list by jQuery with a huge js that is not worth to copy here. But the html turned out like this for every single optgroup I had:

• 1

• Whatever


• Whatever

DJ Monzyk said on 31.08.2011. 22:13

Don't get me wrong, its a great script. However, because of the issue with images toggling and the script/browser getting confused, I started using this instead: http://www.ssdtutorials.com/tutorials/title/show-hide-div-jquery.html

I find it very easy to use, and have no problems with the image switching.

Lisa said on 01.09.2011. 12:12

Hi all, I know this is an old script but the version actually used in the page works well for what I wanted, with one exception - I can't nest expanding and collapsing lists one inside another - only the outermost one works. Can anyone suggest how I could get this working? I have seen other scripts for nested accordian functionality but I like the simplicity of this one! Thanks

David said on 06.09.2011. 22:00

For the people with the image/text toggle problem with multiple elements, here's the fix below. Note that the actual problem is the global 'is_visible' variable.

In the a.togglelink click function... Replace:

$(this).html( (!is_visible) ? showText : hideText);

With:

$(this).html( ($(this).html() == hideText) ? showText : hideText);

Important note with images tags in the variable. The tag that you assign the variable doesn't necessarily stay the same (double quotes are added, for example). You can debug the comparison above with something like:

alert($(this).html());

Place that in the function just before the comparison line above to verify the tag/text that you are comparing.

Hope this helps someone.

Robert said on 16.09.2011. 23:54

Andy,
This is what I am trying to do - on the left is a ol of links (href "#")when clicking on them they want to show a div on the right. So if I have 10 or 20 divs that I have to show/hide based on this what is the updated code?

trevor said on 20.09.2011. 20:28

Can you make the demo downloadable?

Chetaru said on 23.09.2011. 10:05

Hi….
Thanks for sharing this information and resources its really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

Web Design Company India

GotiBandhu said on 24.09.2011. 10:33

Hello Everyone,
In JQuery show () method is very attractive method. By using this method we can show element on page. In this article I am trying to give example which demonstrate how we can implement show () method in page. I have three images on page and I want to give functionality to user that they can hide and show images......... for more details please check out this link...http://mindstick.com/Articles/1c82dc86-c1a4-484f-9277-cf911912a4f0/?JQuery%20show%20method

Thanks !!!!!

sanoj said on 06.10.2011. 12:21

thanks mate

Rahul Rai said on 07.10.2011. 08:30

where to put this code inside a jsp page

Heather said on 08.10.2011. 05:47

Hmm.
It is sure a great script .. ... but why is it that I spend reading miles after miles and the miles go on and a simple thing ... simply replace a text link with an image link is still in the open ...

GOOGLE must love you for all this senseless talk .. you are a great contributor to adding rubbish content to the GOOGLE dust library!

;-)

Aaron said on 10.10.2011. 19:09

How do i use it to insert the link before the toggle div but not append it to a parent and function?

i have tried

$('.toggle').before(' ('+showText+')');

and it does not work or toggle the .toggle divs when clicking on the links.

Any help would be greatly appreciated.

Website laten maken said on 12.10.2011. 16:11

Just used your awesome jquery tricks. Thank you

Johannes said on 14.10.2011. 23:51

try this for both of "the show/hideText can be anything you want" and "the state (is_visible) is saved per togglelink"



// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// modified 15/10/2011 by Johannes Georgi
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='mehr';
var hideText='weniger';

// initialise the visibility check
//var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' ...'+showText+'');
$('.toggle').prev().data('is_visible', true);

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.togglelink').click(function() {

// switch visibility
$(this).data('is_visible', !$(this).data('is_visible'));

// change the link depending on whether the element is shown or hidden
$(this).html( (!$(this).data('is_visible')) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.togglelink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Jayendra kumar said on 18.10.2011. 12:53

Hi,

Thanks to share such a nice article.

dude said on 26.10.2011. 11:37

Be great if you could isolate this code to one page, your head section has 30000 flipping scripts running

joe said on 14.11.2011. 23:56

this doesnt work... I copied the code like you said. that would be very helpful if you could show instructions / basic instructions and not assume we already know

abi said on 23.11.2011. 09:21

It is nice article. I used three div tag. It isn't working.
I got below answer: (can you help me to solve the problem. I just copy and paste your code)
1. student (hide)
------ msg -----
2. status (show)----> here also display "hide" right, but its display "show"
------ msg ----

Resim Bul said on 03.12.2011. 19:42

Thanks too much! I need to this and found it, very good, i am lucky!

subodh said on 27.12.2011. 11:37

Nice... great work.

phlp said on 08.01.2012. 15:46

hi there,

i'm still searching for a solution for the “show all | hide all"-problem.

i've tried morvis script, but it does not work for me, any help?

Casey said on 10.01.2012. 18:00

Johannes' code solves the issue with images not toggling correctly. Andy, I know this post is pretty old, but it's still very handy, and Johannes' modifications might deserve a look.