jQuery show / hide anything

Normal view Thumbnail view Lists view Magazine view

23rd of June 2010 15

There are a lot jQuery scripts to do most about anything. However it's always better to create small custom scripts for whatever you might need it for since you that way will in the future be able to do whatever you'd like. So i present to you a simple jQuery script to allow you to show and hide anything with multiple instances.

jquery show hide

jQuery code

$(function () {

var hiddendivs = $('div.hidden'); //selector for all the hidden div's
var showmore = $('a.showhidden');

showmore.live('click', function() {
$(this).toggleClass('on')
$(this).parent().nextAll('div.hidden:first').slideToggle(300)
this.blur()
return false;
})

});

This is quite simple. "var hiddendivs" is where you define which selectors should be the hidden ones. Then you can just mark your div's (or whatever you'd like) with the CSS class hidden.

Next is "var showmore" where we define which selector and class should activate a hidden div, in this case it's "a.showhidden".

After that we go into the funtion itself where we choose to toggle a class when one click the a-tag in this case (a.showhidden) and now to the more important part:

"$(this).parent().nextAll('div.hidden:first').slideToggle(300)" is where we actually say that we should go one step back in the code (parent) and then look for the first div.hidden within it and slideToggle it with a duration of 300.

CSS code

.hidden {display:none;} /* hide the divs that should be hidden */
.hidden {border:1px solid #ddd;padding:15px;border-bottom:2px solid;margin:10px 0;}
a.on {color:#444;} /* Change color on the active link */

XHTML

<a class="showhidden" href="#">Show more</a>
<div class="hidden">
<h2>More contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit.

</div>
<a class="showhidden" href="#">Show other more</a>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
<div class="hidden">
<h2>More bloody contents</h2>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>
<a class="showhidden" href="#">Show a lot more</a>
<div class="hidden">
<h2>More jQuery whatever content</h2>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.

</div>

View Example

Be sure to check the xhtml source (wordpress stripts my p-tags!) and jquery source code in the example to get a better grasp on just how this works. Note that the parent is very important for this to work but if you like another setup or flow you will have to script this a bit different.

If you still have no idea on how to get this to work feel free to comment and ask.

Share it!

Was it good for you to?

Similar posts to this one

15 great comment(s) for this post

Web design portfolio 3:37 pm 18/08 of 2010

great, thanks for the code!
Reply
End User 2:33 am 22/10 of 2010

I know how to disable the Show & Hide Word Links; but how can I use Show/Hide & return back to the Original Link Wording?

Example: Whatever ANY sentence as a link/Hide/back again

Thanks
-Ed
Reply
johan 6:31 pm 22/02 of 2010

Hi, and thank you very much for the code.

I have a question. I am using this code to expand submenus. Is it possible to use OnLoad to SHOW one of many hidden div’s?

Thank you in advance // Johan
Reply
Tommie Hansen (15 comments) 6:40 pm 22/02 of 2010

@johan: Yes.. but you don’t have to use onload though. One method would be to call the first instance of the div;

$('div.hidden:first').show();

..but a better way would be to add a class on that div ie “nothidden”

html

<div class="hidden nothidden">STUFF</div>

css

div.nothidden {display:block;}
Reply
johan 6:55 pm 22/02 of 2010

That’s absolutely fantastic. Works perfekt with nothidden-div. Had no idea I could put both hidden and nothidden in one class.

BIG thank you once again!!
Reply
Tommie Hansen (15 comments) 6:57 pm 22/02 of 2010

@johan: Yeah, few do and there are few beginner guides on CSS (or was.. haven’t checked for ages) that mention it even though it is quite vital for well.. just about anything.

No problem — good luck with your work! :)
Reply
johan 3:39 pm 23/02 of 2010

Thank you, will post my link when finished.

Btw.. if you open the first div and then the second one. Is it possible to automatically close the first one onclick of the second one.. save some screen estate?
Reply
Tommie Hansen (15 comments) 11:37 am 27/02 of 2010

@johan: Yes, of course. It’s common that one would like that even though it can, for the user, be a bit confusing with all that going on since the screen will change a bit more then expected.

Just hide the “hiddedivs” on iniatiation:

$(function () {

var hiddendivs = $('div.hidden'); //selector for all the hidden div's
var showmore = $('a.showhidden');

showmore.live('click', function() {
$(this).toggleClass('on')
hiddendivs.slideUp(300) //you can just use .hide() as well -- experiment!
$(this).parent().nextAll('div.hidden:first').slideToggle(300)
this.blur()
return false;
})

}); //end dom ready

This isn’t the most beautiful code ever done though and i wouldn’t recommend anyone not to just copy these jquery snippets straight off due to selector performance in a real environment etc.
Reply
johan 10:01 am 15/03 of 2010

@Tommie Hansen: ,

That is awesome. Thank you once again!!
Reply
keyuri 3:24 pm 12/04 of 2010

nice jquery
i like

thanks for shar
Reply
nad 12:52 pm 14/04 of 2010

Hi.Just wandering…It is possible to make it show/open 1 toggle content in one time?
Reply
Tommie Hansen (15 comments) 1:11 pm 14/04 of 2010

@nad: Not really sure what you mean. Please rephrase. :)
Reply
Todd 1:00 am 19/04 of 2010

Not sure if you’re still supporting this code, but I’m wondering if there’s a way to change the link text after it’s clicked. For example, change “Show More” to “Close”.
Thanks for the code, it’s about 50 lines less than I had been using.
Reply
Magento Web Designer 11:23 am 3/05 of 2010

Spot one, nice once.
Just what ive been looking for, this really helps keep a page tidy whist getting in plenty of good content to help SEO
Reply
Tommie Hansen (15 comments) 9:18 pm 11/05 of 2010

@Todd: I’m not NOT supporting it. Just got a little too little time. :) It’s possible just to toggle the text back and forth when clicking.

Try searching for something like “jquery toggle text click” at Google. Sorry that i can’t help out more. :)
Reply

jQuery show / hide anything