Slicker Show and Hide
read 248 commentsLast time I showed you how to make something appear and disappear on a web page. This time I'll show you how to do it with style.
Like we did last time, we'll start with our $(document).ready() and put everything else inside of it.
Adjust the Speed
This time, however, we're going to adjust the speed at which our item shows and hides. To do so, we put a speed indicator — "slow" or "normal" or "fast" or a number of milliseconds (1000 = 1 second) — inside the parentheses:
Note: If you use a speed word, put it inside quotation marks (either single or double); if you use a number, omit the quotation marks: $('#slickbox').show(500);
Attach Effects to Events
The final step here is to attach the effects to events. Last time we attached our effects to the "onclick" event of buttons. This time we'll attach them to links. But here's the rub: Links already have events attached to them. They take the user to whatever URL is indicated in the "href" attribute, usually another page. That means that we not only need to make something happen, but we also need to stop the default thing from happening. We can prevent the default behavior by adding return false;.
So let's take a look at how we would tie the "onclick" event of one link with an ID of "slick-show" to the "show" effect. Here, show() will display a DIV with an ID of "slickbox":
Notice that we attach ".click()" to "a#slick-show". In jQuery, events will often have anonymous, or lambda, functions inside them. That's why inside the parentheses of ".click()" you see function() { ... }. By the way, it's called an anonymous function because it has no name associated with it. I don't know why it's also called a lambda function. Can someone enlighten me?
Here is the final code for three effects — show(), hide(), and toggle(). I've added $('#slidebox').hide() as the first line after $(document).ready() to hide that DIV when the page loads.
- // hides the slickbox as soon as the DOM is ready
- // (a little sooner than page load)
- // shows the slickbox on clicking the noted link
- return false;
- });
- // hides the slickbox on clicking the noted link
- return false;
- });
- // toggles the slickbox on clicking the noted link
- return false;
- });
- });
Look closely at the code and you'll see that our slickbox will show at a slow speed, hide at a fast speed, and toggle somewhere in between (in 400 milliseconds).
Demo 1
Try it out for yourself. Just click on the three following links:
Show the box Hide the box Toggle the box
Newbie Tip
For those of you brand new to JavaScript as well as jQuery, the lines of code that begin with two slashes ( // ) are comment lines that have no effect on the code whatsoever. You can also create multi-line comments by enclosing them in /* and */
Other Effects
Other simple jQuery effects for showing or hiding elements include:
slideUp()slideDown()slideToggle()fadeIn()fadeOut()
Demo 2
Try the slide effects to see how they differ from show/hide:
Slide the box down Slide the box up Slide toggle the box
Bonus
For more sophisticated effects, check out Stefan Petre's Interface plugin jQuery UI
UPDATE
If this type of showing and hiding isn't exactly what you're looking for, please check out my other entries and the jQuery UI Accordion:
- Accordion Madness
- More Showing, More Hiding
- Slicker Show and Hide
- Basic Show and Hide
- jQuery UI Accordion
First of all I want to say thank you for such good tutorial... :)
I have no problem with the code but I had a question if you could help me with... I have an anchor link that takes you to a section where I've applied this show/hide feature. What I want to do is when a user clicks on the anchor link it should take them to that section and open the closed div. Is there a way to do this? I would really appreciate if you/anyone could help me with this!
Hello,
"when a user clicks on the anchor link it should take them to that section and open the closed div."
To do this, simply implement the advice on the post above to reveal the div, and within your anchor link use the "a name" tag to allow the user to jump to the div at the same time. I guess it should work
More info on this tag can be found here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations
By the way, thanks for all the articles Karl.
All the best.
Hello, thanks for the code. And sorry for my english.
What if we try to hide/show dinamic content like in a large list?
For example:
- Item 1
hidden content 1
- Item 2
hidden content 2
.
.
- Item n
hidden content n
Is there a way to show all hidden sections with just 1 link?
In my code I have 2 table rows that have hidden content (see code).. what I want to do is create a link that can open hidden content in both rows. At the moment I have to click on individual links to open their hidden content. It's just a "Show All" content feature I'm trying to add to the site. Any help is appreciated!
Test Link 1
Hidden Content ...
Test Link 2
Hidden Content ...
It's quite simple.Instead of using id tag use class tag for both your elements.
then instead of
use
this way you can hide as many element as you wish
I am a designer trying to make this work.
I have copied and pasted from your code but doesn't work.
So I link to slick.js in the HEAD?
And the jQuery library?
Do I need to create my own css as well?
as far as I know hide() show() and toggle() just adjust div size from zero to you defined size
let's say that you have div width 200px and height 100px
it sipmly start thread for adjusting width and height from 0 to 200px
try define width height and background color
put display:none; if you want to use show()
Yeah, someone neglected to tell you to download jQuery.js. Ok, maybe it's obvious to many developers but if you're a designer looking for extra flare. You'd break your head trying to figure out why it's not working!
Cheers and here is what you need to link in your
Download jQuery NOW!
your way of presenting tutorial is very poor man...i love your tutorial but i cannot implement...you should attach source files....hope you will do it next time...
Thanks
Sorry that this free tutorial written nearly four years ago did not meet your expectations. I hope you find what you're looking for elsewhere.
hey karl! Great tutorial! I've been looking for a nice animation to slide in my divs and your's works perfectly!
I've got 1 little question though:
How can make several divs show/hide? The above code applies to 1 div, but what if I have multiple divs with different content and i want to show them seperately when someone clicks on a link? I've tried making multiple divs, but it either shows all the divs or doesnt work at all.
Im not a webdevelopper, so sorry if my question is a bit stupid :)
Hello Karl
Once again, nice work on the tutorial just what I was looking for. Apologies if my question is in the wrong neighbourhood:) I am trying to marry flash and jquery into browser bliss. My query...... I would like to trigger demo 1's 'toggle the box' from a button inside a swf, I am using AS2. I've discovered that external interface call would be suitable for achieving this. P.S - I am very new to jquery.
Any help/ examples would be greatly appreciated. Thanks.
Hello Karl
Sorry for posting twice, I just realised my mistake.
Once again, nice work on the tutorial just what I was looking for. Apologies if my question is in the wrong neighbourhood:) I am trying to marry flash and jquery into browser bliss. My query...... I would like to trigger demo 1's 'toggle the box' from a button inside a swf, I am using AS2. I've discovered that external interface call would be suitable for achieving this. P.S - I am very new to jquery.
Any help/ examples would be greatly appreciated. Thanks.
Hi Jim. I was searching for a solution to my problem when I found your comment. I'm having the same issue as yours, except I need to fix this only on IE and Chrome. How would I trigger a jQuery click event (for a modal box) on a HTML anchor link with an animated flash movie inside? This works fine with FF and Opera, but not in IE and Chrome though. Anybody who can help? Thanks.
Hi! Great script... I'd just like to know what code I should add if I am having multiple contents going to be hidden and shown differently in one page, BUT I don't want to just copy and paste the .js code and rename it 1-2-3--n... you know what I mean?
For example:
Pseudocode
[div class="content1"] Content 1 texts
[a class="toggle content 1"] toggle 1
[div class="content2"] Content 1 texts
[a class="toggle content 2"] toggle 2
[div class="content3"] Content 1 texts
[a class="toggle content 3"] toggle 3
How do I use array? Not really good in JS, so if you can help, that'll be great
I meant:
[div class="content1"] Content 1 texts[a class="toggle content 1"] toggle 1
[div class="content2"] Content 2 texts
[a class="toggle content 2"] toggle 2
[div class="content3"] Content 3 texts
[a class="toggle content 3"] toggle 3
Nice tutorial. good examples, just trying this instead of using prototype for everything. Am loving jquery at the moment
it's called a lambda function because anonymous functions come from a form of mathematical computation called lambda calculus, birth place of most of the functional programming paradigm.
Further, lambda calculus involved recursive mathematical formulas, hence the reason reusable 'functions' as we now know them became useful.