Documente Academic
Documente Profesional
Documente Cultură
http://www.learningjquery.com/2007/03/accordion-madness
Mar 05 2007
HTML:
1. <div class="demo-show2">
2.
<h3>Title 1</h3>
3.
<div>Lorem...</div>
4.
<h3>Title 2</h3>
5.
<div>Ipsum...</div>
6.
<h3>Title 3</h3>
7.
<div>Dolor...</div>
8. </div>
With this option #3, we start with all of the <div>s hidden. If we click on one of the headings, the following <div> will slide down.
If we click on the same heading again, that <div> will slide back up. Clicking on on any heading will also hide all of the other
<div>s the ones that don't immediately follow it. Therefore, no more than one <div> can be open a a time.
To achieve this, we start by hiding all of the <div>s inside the first (:eq(0)) <div class="demo-show2">:
PLAIN TEXT (#)
JavaScript:
1. $(document).ready(function() {
2.
$('div.demo-show2> div').hide();
3. });
Then we set up the .click() method for all of the relevant <h3> elements
PLAIN TEXT (#)
1 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
JavaScript:
1. $(document).ready(function() {
2.
// ...
3.
$('div.demo-show2> h3').click(function() {
4.
// ...
5.
});
6. });
Finally, inside the .click(), we toggle the >div< immediately following the clicked >h3< and hide all the other >div<s that are
visible siblings of the toggled one. Here is the complete script:
PLAIN TEXT (#)
JavaScript:
1. $(document).ready(function() {
2.
$('div.demo-show2> div').hide();
3.
$('div.demo-show2> h3').click(function() {
4.
$(this).next('div').slideToggle('fast')
5.
.siblings('div:visible').slideUp('fast');
6.
});
7. });
Title 1
Title 2
Title 3
Pretty simple, straightforward effect. Let's jazz it up a bit.
Option 3b: Zero or One, Queued Effects
Here we're going to keep the same rules about having either one or no <div>s visible at a time. But now we're going to queue the
effects. In other words, we'll make the visible one slide up before the next one slides down.
The first couple lines of code are the same as those in option 3a:
X (#)
JavaScript:
1. $(document).ready(function() {
2.
$('div.demo-show2> div').hide();
3.
$('div.demo-show2> h3').click(function() {
4.
[...]
5.
});
6. });
But now things get a touch more complicated. We're going to set a couple variablesone for the nex
2 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
and one for all siblings of that next one, as long as they are visible <div>s:
PLAIN TEXT (#)
JavaScript:
1. $(document).ready(function() {
2.
$('div.demo-show2> div').hide();
3.
$('div.demo-show2> h3').click(function() {
4.
5.
6.
});
7. });
So, now that we have the two variables, let's put them to use. We want to slide any visible sibling <div> up first and then toggle
the next <div> using .slideToggle(). But we want this queued effect to occur only if there actually is a visible div. So, we'll use
an if statement.
PLAIN TEXT (#)
JavaScript:
1. $(document).ready(function() {
2.
$('div.demo-show2> div').hide();
3.
$('div.demo-show2> h3').click(function() {
4.
5.
6.
7.
8.
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
9.
10.
});
11.
}
12.
});
13. });
The trick here for getting the one effect to occur after the other is to put the .slideToggle() code in the .slideUp() method's
callback function.
Now, we just need to add the else condition for those times when there aren't any visible <div>s:
X (#)
JavaScript:
1. $(document).ready(function() {
2.
$('div.demo-show2> div').hide();
3.
$('div.demo-show2> h3').click(function() {
4.
5.
6.
7.
8.
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
9.
10.
3 of 28
$nextDiv.slideToggle('fast');
});
2/7/2016 4:05 AM
11.
12.
http://www.learningjquery.com/2007/03/accordion-madness
} else {
$nextDiv.slideToggle('fast');
13.
14.
});
15. });
As you can see, for those cases we use a simple .slideToggle() on the next <div>.
See this code in action below. Enjoy!
Title 1
Title 2
Title 3
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
234 comments
Newer Comments (http://www.learningjquery.com/2007/03/accordion-madness/comment-page-2#comments)
1. Ty
March 5, 2007 at 11:10 am
Finally, the correct functionality required.
I think I prefer the first non-jazzed up version, the second makes me motion sick, lol.
Way to go, good work.
Hint: These div's can contain image buttons not just text, and background colors and borders.'
Dig into your Css bag-o-tricks for that people, have fun!
X (#)
2. Karl (http://www.englishrules.com)
March 5, 2007 at 11:20 am
Yes, thanks for adding that hint, Ty. There are multifarious ways to prettify these menus, for su
3. Luis Martins
March 5, 2007 at 1:37 pm
It doesnt behave quite right on IE7, but excellent work. Thanks.
4. Karl (http://www.englishrules.com)
March 5, 2007 at 2:21 pm
4 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
Hi Luis, by not behaving quite right in IE7, I assume you mean that there is a little bump at the end of the slide. I just fixed
that by giving the paragraphs inside those <div> elements a style declaration of margin-top: 0. Thanks for the heads-up.
Let me know if you see any other issues.
5. ziggy
March 6, 2007 at 1:58 am
--I think I prefer the first non-jazzed up version, the second makes me motion sick, lol.
Yeah, me too. Jazzy effects look nice at first but quickly get annoying when you have to use them a lot.
6. ziggy
March 6, 2007 at 2:22 am
btw, in ie6 it won't open unless you click the text; after one time opening it you can click anywhere on the blocks to activate
them.
opera works but doesn't show the proper "hand" cursor at all.
I know it's not a plugin, but thought I'd note it as people ARE going to use your code.
7. Joram Oudenaarde
March 6, 2007 at 6:56 am
Finally a great explanation on those slick movement-options :)
Thanks a lot for making this, hehe.
There's only one little question in addition to your tutorial;
In your tutorial, the text shows up belw the buttons after you press it. Could you tell us how we could make a version
where the text shows up abve the button? So if you press that button, the button will slide down, showing the text that's
been hidden "above" it. :)
Regards,
Joram
8. Karl (http://www.englishrules.com)
March 6, 2007 at 10:51 am
@ziggy: I fixed both the IE6 and the Opera issue with a little modification to the CSS. IE6 needs the width to be defined for
the h3, and Opera needs the cursor to be defined. here is the relevant CSS:
.demo-show2 {
width: 350px;
margin: 1em .5em;
X (#)
}
.demo-show2 h3 {
margin: 0;
padding: 5px;
width: 338px;
background: #bfcd93;
border-top: 1px solid #386785;
border-bottom: 1px solid #386785;
cursor: pointer;
}
@Joram: You can move the div elements above the h3s in your markup, and then use
9. joram oudenaarde
5 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
14. Nicki
March 17, 2007 at 11:46 am
Hi, little question: how can i show the first div visible on startup?
15. Karl (http://www.englishrules.com)
6 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
17. Justin
April 3, 2007 at 12:31 pm
One of the wonderful people in the #jquery irc channel was able to help me with this last night. The answer is...
$(this).next('ul').slideToggle('fast')
.parent().siblings('li').find('ul:visible').slideUp('fast');
X (#)
7 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
20. charles
April 23, 2007 at 8:53 am
Hi,
i got a list, each of its items must contain a div. in fact each of my "li class="titre"" tag corresponds to the "h3" tag of the first
example and my own divs contained in each li have their proper "contenu_article" class. i'm a beginner at jquery and i'm
trying to make this work
$('div.demo-show2> div').hide();
$('div.demo-show2> li class="titre"').click(function()
{
$(this).next('div').("contenu_article").slideToggle('fast').siblings('div:visible').slideUp('fast');
});
but it doesn't. i think that this part : ('div.demo-show2> li class="titre"') is badly written. does anyone can help me please ?
21. Karl (http://www.englishrules.com)
April 23, 2007 at 11:07 am
Hi Charles,
I'm not sure exactly what you're trying to show/hide. Still, I see a couple problems with the selector expression you're
using. It looks like you're using HTML syntax ( e.g. li class="titre" ) instead of CSS syntax ( e.g. li.titre ).
Switching your selectors to CSS syntax will go a long way towards getting your code to work. Also, you can remove the
code that is specifically related to my example ( e.g. div.demo-show2 ).
If I'm understanding you correctly, you might want to try something like this:
$('li.titre').click(function() {
$(this).next('div.contenu_article').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
});
22. Brent
April 30, 2007 at 12:11 pm
Thanks a lot for your article, this helped me in a jam!
23. Aaron
May 4, 2007 at 5:50 pm
I have a weird question. First let me say this code is great and almost what i am looking for.
X (#)
I want to have images that when you mouse over it fades in a div on the right side of it and when mouse over the next one
it fades out the previous and fades in the next div.
I have tried modifying this code but am having no luck.
Here is example HTML of the layout.
8 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
</td>
<td class="divs">
<div>1 This is the box that will be shown and hidden and toggled at your whim.</div>
<div>2 This is the box that will be shown and hidden and toggled at your whim.</div>
<div>3 This is the box that will be shown and hidden and toggled at your whim.</div>
</td>
</tr>
</table>
I am so lost on how to get this to do this and can not tell you how much i would appreciate it if someone could help me out.
Thanks again for everything and great work!!!
Aaron
24. GoodMixer
May 8, 2007 at 4:18 pm
I'm having problems getting this to work in ie7. Viewing this example in ie7 works fine. My html is
<div class="demo-show2">
<h3>Tell a Friend</h3>
<div class="form_bg">Lorem ipsum dolor.</div>
<h3>Subscribe to Newsletter</h3>
<div class="form_bg">In tincidunt nisi tempus feliss.</div>
<h3>Title 3</h3>
<div class="form_bg">In tincidunt nisi tempus felis. Donec aliquam,</div>
</div>
and I'm calling 2 .js files in the <head> jquery.js and show_hide.js.
show_hide.js is the following code
$(document).ready(function() {
$('div.demo-show2> div').hide();
$('div.demo-show2> h3').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
X (#)
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
Any help would be great I'm really stumped on this one. Works fine in firefox.....
25. Karl (http://www.englishrules.com)
May 8, 2007 at 4:53 pm
Hi GoodMixer, I pasted your code into another doc and tested it in IE7. Seems to be working f
Let me know if it works for you, too.
9 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
26. GoodMixer
May 9, 2007 at 4:53 am
Thanks for looking at that Karl. It seems to work for me when I have the script in the head tag but not when I have it in an
external .js file. Is there something I am missing? I don't know. I guess I'll just forget about the external file. Thanks again.
27. Karl (http://www.englishrules.com)
May 9, 2007 at 7:38 pm
Not a problem. I'm not sure why it's not working for you when the code is in an external .js file, though. That shouldn't really
have anything to do with it. I've moved my test file's script to an external file, and it's still working. Take another look.
A couple things to consider: Make sure you are including the jquery.js file before the other one. Also, it wouldn't hurt to
double-check the path to the .js file, just in case there was a typo or something. Let me know what you discover!
28. GoodMixer
May 10, 2007 at 8:56 am
I'm really not getting anywhere with this. I'm running this script on an Expression Engine site and it work great in firefox but
ie (6 and 7) it works sometimes and then if you refresh it will just show all 3 boxes with content and nothing clickable. I
can't see why it would work sometimes??? Unless EE isn't loading the full script.
I am running the jquery.js first. You are welcome to have a look if you want to as I'm not getting anywhere with it.
http://www.mickykelleher.com/golf/ (http://www.mickykelleher.com/golf/) (The site is a work in progress)
29. John Williams
May 10, 2007 at 6:44 pm
In the first menu "Option 3: Zero or One", how do I make to open the text in a certain title when the page loads? (the text
inside Title1 or Title2 or Title3).
i managed to load it with Title1 opened:
$(document).ready(function() {
$('div.demo-show2:eq(0) > div:gt(0)').hide();
$('div.demo-show2> h3').click(function() {
$(this).next('div').slideToggle('normal')
.siblings('div:visible').slideUp('normal');
});
});
X (#)
$(document).ready(function() {
$('div.demo-show2:eq(0) > div:gt(1)').hide();
$('div.demo-show2> h3').click(function() {
$(this).next('div').slideToggle('normal')
.siblings('div:visible').slideUp('normal');
});
});
10 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
.siblings('div:visible').slideUp('normal');
});
});
Thank you.
30. Vivek
May 11, 2007 at 2:43 pm
Hi, as i am viewing the above demos of after a tutorials, they are shuttering in the Firefox 2.0.3
But when i view the same in IE6.0 it slides beautifully. In FF 2.0.3 it slides after a bit of shutter.
31. John Williams
May 11, 2007 at 4:00 pm
Try removing or diminusing, in the CSS code, the top and bottom padding of demo-show2.div. Include that height in an old
html variant (a table with a row of the same hight for example). I hope I understood your question write.
32. Srgio Pinto (http://estudio5.org)
May 14, 2007 at 11:03 am
Hi Karl.
First just wanna say thanks for this plugin, it's great.
Just needed to know if there is any easy way to convert this plugin to an horizontal accordion.
Thanks in advance.
Best regards Srgio pinto
33. Dena
May 22, 2007 at 2:51 am
Thanks for the clear example!
Is there an easy way to change the h3 content on toggle? For instance, from "Open" to "Close"?
Thanks!
34. layZboy
May 24, 2007 at 4:38 pm
I have a question. If i want the section I click on to become the top, how do I do this? I was curious since after i used it and
X (#)
my sections were about 4 paragraphs longer it became annoying to scroll to the correct section each time. I was
wondering if there's a way to expand/collapse, as well as scroll to the proper section all at once. Thanks.
35. mpmchugh
June 8, 2007 at 9:45 pm
Hi,
How would one best go about having the selected header change colors when selected? And
selected?
Thanks.
-mpm
36. huphtur
11 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
anchor like <a name="whatsnew"></a>. It adds the hash to the URL, but since the anchors don't exist on the page,
clicking on those headings keeps adding unnecessarily to the history, making for terrible "back button" navigation.
Anyway, Klaus Hartl's Tabs plugin does a really nice job of using anchors the right way, tracking history so that the back
button will actually do something. If you check that one out, I'm sure you'll be able to glean some really useful stuff from it.
It's not the straightforward accordion, but it works on the same principle.
I realize this is the second time I've urged you to take a look at another plugin to find the solution, but I'm really not trying to
avoid helping you. Really!
40. huphtur
July 6, 2007 at 1:44 pm
That's indeed what I was looking for. Thanks for the tips!
41. Justin
July 17, 2007 at 3:57 pm
X (#)
Karl,
On the apple site they have their own version of what appears to be an accordion type menu.
when you mouseover. I'm sure you've seen it already.
My question: Have you been able to mimic this effect with jQuery. On every jQuery accordion
bottom will always make some sort of bumping motion. Depending on the speed it might be a
I've been able to minimize it, but never get rid of it like Apple has. Any ideas? I probably need
approach.
link for reference: http://www.apple.com/mac/ (http://www.apple.com/mac/
42. Karl (http://www.englishrules.com)
12 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
(it's a small bump on the 4th tab, when you click any of the tabs, just moves down and up really quick)
On the apple page, if i have the first tab open and mouseover the second tab, the third tab does not move at all. That's the
effect i'm looking for. It loosk more solid. I have used javascript to set heights on the container and the tabs themselves,
and this stops the tabs from interfering with the rest of the page, however the tabs themselves make these jumps.
I hope this clarifies it a bit.
44. Karl (http://www.englishrules.com)
July 19, 2007 at 5:21 pm
Ah! I definitely see what you mean now. I don't know what could be causing this, but if you post the question to the jQuery
Google Group (http://groups.google.com/group/jquery-en) , maybe someone who is more familiar with the fx.js component
of the jQuery source code could provide a solution. Otherwise, this could be a bug that should be logged n Trac on the
jquery.com. But posting the question to the Google Group is definitely the first step. Make sure you provide the URL, too.
That was really helpful for seeing what the problem is.
45. Bobby Digital
July 23, 2007 at 8:54 pm
I know someone else asked this but I can't find the solution anywhere.
X (#)
How can I have the class of an h3 change when you click on it, and then revert to normal when you either
1. click on it again, or
2. click on a different h3?
I tried the following:
$('this').toggleClass('active');
inside the conditional statement of your "//queued showing and hiding" example, but I quickly
clue what I am doing.The class changes but stays that way when I click on other h3's
Any ideas?
46. Bobby Digital
13 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
X (#)
Services
For the web
Web Design
Squared Eye is known for our attention to detail, our love of all things ea
can take your needs and find a web solution for them.
Web Development
If you need your website to live and breath to do more than just be an on
Eye can take your site to the next level, integrating anything from e-comme
of helpful technologies in-between.
14 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
$(document).ready(function() {
$('ul.accordion> li> p').hide();
$('ul.accordion> li> h4').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('p:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
I've tried adding bobby's code in there in various places, but can't figure out the right solution.
the page I'm working on is here ()
50. Karl (http://www.englishrules.com)
July 24, 2007 at 2:48 pm
Hi Matthew,
Would you mind posting that link to your page again? For some reason it has no href.
51. matthew smith (http://squaredeye.com)
July 24, 2007 at 6:21 pm
Karl,
Man, what a numskull. Sorry, too many things at once :) Here is the link (http://squaredeye.com/design) . Thanks :)
52. Karl (http://www.englishrules.com)
July 25, 2007 at 11:09 am
Hi Matthew, no worries.
It looks like you're sliding down the <p>s just fine; but getting others to slide back up seems to be the problem. Is that
right?
The cause of the problem is that you're selecting for visible siblings, but since those other <p>s are contained within
separate <li>s, they aren't siblings.
Try replacing this line:
X (#)
with this:
var $visibleSiblings = $(this).parent().siblings().find('p:visible');
15 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
I had thought I might have it by adding $(this).parent().addClass('arrow-down') thinking that was targetting the
nested list element, but it appears I was wrong.
54. Karl (http://www.englishrules.com)
July 26, 2007 at 9:16 pm
Hi Matt,
My pleasure. Doesn't matter if the unordered list is nested, just that the h4 within each li has only one sibling -- a p. So,
you need to go up from the clicked h4 to its li, then select all of that li's sibling lis, and within those find all ps and slide
them up.
About the addClass(), what you have should work. I peeked at your code and didn't see you doing that. If you wanna shoot
the whole script to me so I can take a look at it, feel free to send it through the contact form (/contact/) .
55. bs
July 27, 2007 at 9:11 am
i want to add dynamic div. how can i give dynamic div name inside $('div.demo-show2> div').
56. Caleb
July 31, 2007 at 4:34 am
Hi Karl,
I'm trying to build upon the examples you have set. How can i create a 'close' option within each div?
Here's whats i'm working on so far.
thanks! your help would be greatly appreciated.
caleb
57. Justin
July 31, 2007 at 2:45 pm
Caleb,
Place a class "close" on the div containing the close text. Then place this in your javascript after your other click function.
$('.close').click(function() {
$(this).parent().slideUp('slow');
});
X (#)
58. Caleb
July 31, 2007 at 6:48 pm
thanks justin! :)
59. Mitchell Waite (http://www.whatbird.com)
August 1, 2007 at 1:50 pm
Is there anyway to prevent the menu height from jumping around. In other words can the heig
open and close to fill it?
Thanks
Mitch
16 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
X (#)
display: block;
}
h3 a:hover {
background-position: 0 -24px;
}
h3 a:active {
background-position:0 -48px;
}
You'll probably need to use return false; in your script so it doesn't fire the default click eve
64. caleb
September 3, 2007 at 8:44 pm
17 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
You'll need to change 'someElement' to something that relates to an element on your page. This will slide (up or down) all
divs that are direct children of <div class="show-hide">
btw, in my previous example, div isn't a variable; it's an element.
X (#)
<div class="moduleDescription">
<ul>
18 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
<li>
<!-- start description -->
<a href="http://www.tmz.com/2007/09/04/glaad-accepts-jerrys-mea-culpa/">
GLAAD Accepts Jerry's Mea Culpa </a><br />
- <span class="date">4 Sep 2007 | </span>
<!-- end description -->
</li>
</ul>
<h6>Show/Hide</h6>
<div>
<p>
<p>Filed under: <a href="http://www.tmz.com/category/tv/" rel="tag">TV</a></p>
<a href="http://www.tmz.com">TMZ.com</a>:
X (#)
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div.moduleDescription> div').hide();
$('div.moduleDescription> h6').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
19 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
} else {
$nextDiv.slideToggle('fast');
}
});
});
</script>
try this . . .
var $visibleSiblings = $(this).parent().siblings().children('div:visible');
X (#)
I've tried the suggestion you provided and it works, but theres this bug issue when say i click expand all, and then i click
collapse 1 item, everything collapses and it starts going up and down.
I've also doing this.
$('.ExpandAll').click(function() {
$('div.show-hide > div').slideDown();
});
$('.CollapseAll').click(function() {
$('div.show-hide > div').slideUp();
});
But it still has the same bug. Isit possible to be fixed?
20 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
test here
72. Karl (http://www.englishrules.com)
September 5, 2007 at 7:37 am
Eric, I guess I had missed that in the markup. Oops. You'll need to specify the class in your siblings method then:
var $visibleSiblings = $(this).parent().siblings('div.moduleDescription').children('div:visible');
My intention with the code is to say slideup all the the visible dt-elements except the clicked e
Am I correct assuming that .not($(this).prev()) is not handled as it should be when Im u
jquery.js?
21 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
X (#)
Yes, this is possible. Right after the line that reads var $nextDiv = $(this).next();
if ($nextDiv.is(':visible') ) {
$(this).text('expand');
} else {
$(this).text('contract');
}
81. caleb
September 26, 2007 at 8:52 pm
hi Karl,
thanks for that. i've included an example of what i'm working on to give you a better understan
22 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
achieve.
please see example here and screenshot here.
how can i have the words on the right corner to change accordingly?
thanks for taking your time! :P
82. Karl (http://www.englishrules.com)
September 26, 2007 at 10:17 pm
Hi Caleb,
I don't see the text in your example page (though I do see it in the screenshot). The principle will be the same as I
described in comment 83, but the selector expression will just be a little different. For example, you could put a <span>
inside the <h4> with the "expand" text in it, right before the other text and float it right. Then you can just change the text
on clicking the <h4> the same way I showed in comment 83, except that, instead of this:
if ($nextDiv.is(':visible') ) {
$(this).text('expand');
} else {
$(this).text('contract');
}
$(this).next('div').animate({
width:"100%"}, 250)
.siblings('div').animate({
width:"0"}, 250)
X (#)
23 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
the css and jquery files are there on the server with it
Basically I want the subnav to show/hide the content layers accordian style like Option 3a on this page, with the first (about
us section) showing on page load.
Can it be done?
86. Karl (http://www.englishrules.com)
September 28, 2007 at 2:56 pm
Hi Sean,
I don't have time to write the whole script out for you, but I'm guessing that the problem you're having involves identifying
the correct div to show and hide when you click on one of those links. Try pasting this into your script file. Then you can
go through and replace the logic of what gets shown and hidden when by looking at the example script in this entry:
$(document).ready(function() {
$('#subNav > li').each(function(index) {
$(this).click(function() {
$('#loadContent > div:eq(' + index + ')').slideToggle();
return false;
});
});
});
87. Sean
September 28, 2007 at 5:53 pm
Hi Karl,
Thanks for that, but I still didn't get it to work.
I'm not really clear on where exactly to put the logic of what gets shown and hidden when.
thanks for taking your time!
88. Karl (http://www.englishrules.com)
September 28, 2007 at 7:17 pm
okay, Sean, take a look here:
http://test.learningjquery.com/test2.html (http://test.learningjquery.com/test2.html)
The script is in the <head>.
89. Sean
September 28, 2007 at 7:32 pm
X (#)
that's beautiful!!
thanks again for your help!
90. Karl (http://www.englishrules.com)
September 28, 2007 at 7:37 pm
Not a problem. Glad I could help.
91. reza
November 6, 2007 at 10:46 am
Hi,
How to add a fading effect during the slide motion?
24 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
93. Beau
November 8, 2007 at 2:19 pm
Great Tutorial!
I am new to Java, what would be the path in the HTML for an external .js scriprt?
94. Rick R (http://www.learntechnology.net)
November 10, 2007 at 6:02 pm
Just wanted to say thanks for this tutorial. Nicely done and extremely helpful.
95. Dustin W. Gold
December 1, 2007 at 10:58 pm
Thank you very much for your hard work. I am primarily a graphic designer and have been getting into web in the last year,
but have been using a programmer. I know HTML and CSS, but have been trying to learn some javascript and this is the
best source that I have found.
Thank you very much.
96. Dustin W. Gold
December 6, 2007 at 2:00 am
I am new at this so please be patient, but is there a way to keep the menu open when I click on links. For example, if I
open "Video Solutions" and I click on a link the accordion closes. I can separate the menu using php, but it still will
X (#)
continue to close because it is reloading the menu. Any advise?
http://www.e6lu2eiubr.web.aplus.net/index.php?page=about_us (http://www.e6lu2eiubr.
/index.php?page=about_us)
$(document).ready(function() {
$('div.demo-show> div:gt(0)').hide();
$('div.demo-show> h3,h4').click(function() {
$(this).next('div').slideDown('fast')
.siblings('div:visible').slideUp('fast');
25 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
});
});
X (#)
20 Pings
1. davidbisset.com Accordion Madness
March 6, 2007 at 7:48 pm
[...] Another way to do the accordion menu effect using CSS [...]
2. time design aufklappmenu zum verlieben (http://www.zeitdesigner.de/?p=25
March 20, 2007 at 1:13 pm
[...] accordion-madness [...]
3. WebAppStory I love jQuery - Accordion Example - Code Snippets
September 25, 2007 at 5:45 pm
26 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
X (#)
27 of 28
2/7/2016 4:05 AM
http://www.learningjquery.com/2007/03/accordion-madness
(http://creativecommons.org/licenses/by-sa/2.5/)
Copyright 20062016 Learning jQuery and participating authors. Written content on this site is under
X (#)
a Creative Commons License. Code examples are under your choice of MIT or GPL license.
Development by Karl Swedberg (http://www.englishrules.com/) . Design by Rex Rainey
with WordPress (http://wordpress.org/) .
(http://theeighthnetwork.com/)
28 of 28
2/7/2016 4:05 AM