23rd of June 2010 1
jQuery show / hide anything
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 code
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 {border:1px solid #ddd;padding:15px;border-bottom:2px solid;margin:10px 0;}
a.on {color:#444;} /* Change color on the active link */
XHTML
<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>
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?
Related posts
Similar posts to this oneSponsors
Support for the site!1 great comment(s) for this post
-
Web design portfolio 3:37 pm 18/08 of 2010
great, thanks for the code!
Reply
Your opinion matters. Add it below.
