Jquery: show/hide multiple elements independently

Thanks very much! Works great!

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

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

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

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.

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

Hello,

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

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.

@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.

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?

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='';

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

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

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');
}

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

Thanks muchly!

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

var hideText=';
var showText=';

garr, garr

// 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 :(

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)

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?

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!

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.

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

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

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

John

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.

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?

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?

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?

@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 behavi

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

Any ideas how to fix the IE bug?

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.

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.

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.

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.

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!

>> 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".

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?

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.

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!

>> 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');

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

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!

--*/

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?

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.

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?

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.

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.

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.

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.

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 :)

Hi,
jQuery
google

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

thank you

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

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

Needs more documentation...

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!

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

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

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!

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

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

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.

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);

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!

thank you, it works.

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-...

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

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...

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

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?

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!

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

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?

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!

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?

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 ;-).

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

I have noticed that the script displayed on this page (http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-e...), 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

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

Your toggle resets my CSS formatting, specifically DIV padding.

Any way to get around this ?

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?

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;

});
});

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);

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

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?

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!

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.

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.

Thank you!

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

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

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.

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!!

How can implement COOKIE, for remember state ?

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

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

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

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?

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.

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.

@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.

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

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

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;

});
});

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 */
}

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);
});
});

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

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?

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.

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?

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;
});
});

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!

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.

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 :)

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!!!

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?

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

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

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

How would I add cookie support to this?

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-prob...
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;
});
});

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

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.

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

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

Thank you all for the script.. :)

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??

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?

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?

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

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

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;
});

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

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.

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.

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.

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.

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

nice show hide jquery

thanks for sharing

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!

Excellent script!

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

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.

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)

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

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

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.

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;

});

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

Hi can i get the full code please

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;

});
});

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…

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?

i couldnt do it for my website Tennar Mantar on left

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.

Thanks for the code!
Greet's from Brazil!

Great Stuff!

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.

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?

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

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

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 :/

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

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

So the important thing about this is the way the js made by Adam changes at this point:

$(document).ready(function() {
// the vars showText and HideText can be erased, like $('.toggle').prev().append(' ('+showText+')'); and the visible var.
// just to make the ul made from the options invisible
$('.toggle').hide();
$('a.togglelink').click(function() {
// This is the line of code that will do the trick: so add .parent() till it works
// And also I added .slideToggle instead of .toggle for a different animation effect
$(this).parent().parent().next().slideToggle();
return false;
});
});

Hope it helps :)

Oh, I almost forgot... It's totally cross browser!

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.

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

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.

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?

Can you make the demo downloadable?

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

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/?JQue...

Thanks !!!!!

thanks mate

where to put this code inside a jsp page

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!

;-)

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.

Just used your awesome jquery tricks. Thank you

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;

});
});

Hi,

Thanks to share such a nice article.

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

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

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 ----

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

Nice... great work.

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?

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.

GREAT article. I'm a n00b, but I have the script working great on my site.

I have multiple "toggles" on my page.

Where should I put an id in the toggle so that I can send the id to my php page which will update mysql to show which was clicked?

And where can I put the link to my php page that will get the id, when the toggle is clicked?

Thanks in advance for any help.

Is there a way to get an id from the div when clicked and send it to a php page? I tried adding this but it keeps failing.

Andy! Thanks for this. I'm going to use this implement it on www.talentpoolltd.ie

1) How can I hide the previous data as the other tab is clicked and the data of that tab is opened.
2) How can I do the same if I have two pairs of data and each have three tabs respectively

Useful script. Thank you very much! it was so easy to implement.

This is wonderful code and it works so well! Is there ANY WAY to append the toggle link AFTER the div, so the button to open/close slides down with the content????

como sería el texto html para que funcine el script?

This is such a lovely, simple script; thank you for making it available. And thank you to Jay for the show/hide fix!

We came up with a simpler solution for our needs. Basically it hides a specific element ID, then shows it independantly:

$(document).ready(function() {
//Hides article#body
$('article#body').hide();
//Fires the function when section#report is clicked
$('section#report').click(function() {
//Expands article#body under the currently clicked section#report
$(this).contents('article#body').slideToggle('fast');
return false;
});
});

I found that the image swap code sometimes went out of synch with the dropdown The following solution also lends itself well if you wanted to open all or some at once. swaps out a css class rather than an image.

Multiple seclect accordion

.togglelink{background-image:url('plus.gif');background-repeat:no-repeat;background-position: 0px;margin-left:40px; }
.second{background-image:url('minus.gif'); background-repeat:no-repeat;background-position: 0px;margin-left:40px;}
/* .headlink{margin-left:20px;}*/

$(document).ready(function() {

// initialise the visibility check
var is_visible = false;

$('.toggle').prev().data('is_visible', true);

$('a.togglelink').click(function() {

// switch visibility
is_visible = !is_visible;

$(this).toggleClass("second");

$(this).parent().next('.toggle').toggle(20);

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

});

//$('a.show_all').click('.togglelink')(.html(hideText));
$('a.show_all').click(function() {

//$('.togglelink').toggleClass("second");
$('.toggle').show();
$(".togglelink").addClass( "second");

return false;

});

});

SHOW ALL

selection 1

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.

selection 3

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.

selection 3

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.

Love the script. thank you. Wondered if it was possible to have different show/hide text on the same page? most of the show/hide function can say Show | Hide, but i also want to use this script for our advanced search to read : Advance Search | Hide Search. thank you for your time

bonjour,
Je trouve très inintéressant le code pour ma part il fonctionne bien pour un div par contre des que j'en met 2 voir + plus rien ne fonctionne coté html voici le code:

j'ai fais que le test
2eme test

je ne parviens pas à le faire fonctionner,pourrais-je avec un exemple fonctionnel voici le code

$(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+')');
$('.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;

});
});

malheureusement il fait apparitre 1 seul show au lieu de 2 et lorsque je clique rien ne se passe.

Help me

Hi, I love your work! I wonder if there is any way to remove the brackets around the show/hide button, for graphic purposes. Thanks!

Andy, i'm trying to add a different show/hide text based on the div class . so if i add .toggle2 i want showText2 and hideText2 to be displayed. i've started on the code but i am not a programmer.

here's my attempt:
$(document).ready(function() {
/* choose text for the show/hide link */
var showText="Read more";
var hideText="Hide";
/* 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 depending on whether the element is shown or hidden */
if ($(this).html()==showText) {
$(this).html(hideText);
}
else {
$(this).html(showText);
}
if ($(this).html()==showText2) {
$(this).html(hideText2);
}
else {
$(this).html(showText2);
}
/* toggle the display */
(this).parent().next('.toggle').toggle('fast');
(this).parent().next('.toggle2').toggle('fast');
/* return false so any link destination is not followed */
return false;
});
var showText2="Expand search";
var hideText2="Close search";
$(".toggle2").prev().append(' ('+showText2+')');
$('.toggle2').hide();
$('.toggle2 a.togglelink').click(function() {
/* change the link depending on whether the element is shown or hidden */
if ($(this).html()==showText2) {
$(this).html(hideText2);
}
else {
$(this).html(showText2);
}
/* toggle the display */
(this).parent().next('.toggle2').toggle('fast');
/* return false so any link destination is not followed */
return false;
});
});

really need help on this one.

Merci pour le script, il fonctionne à la perfection.

Hello, a bit of help.

I'm using this script but having a bit of trouble.

http://jsfiddle.net/mrcarllister/LqbR8/

See above for example. As you can see when you click one show before hiding the other, it doesn't work as it should.

Any advice would be appreciated.

Cheers,

Carl

I need to hide when i open page so what need to change in query

Re removing bracket. Remove the brackets either side of the the following line in the javascript.
with brackets
('+showText+')

without brackets
'+showText+'

Hope this helps?

Hi
Thanks for this good code. If i use your code in master page its working fine. But when i redirect from master to child page Show Hide links not showing up in child pages. How to display Show Hide links even when user is in child form. Thanks