accordion madness _ learning jquery
TRANSCRIPT
-
7/25/2019 Accordion Madness _ Learning JQuery
1/28
Mar 05 2007
Accordion Madness(http://www.learningjquery.com/2007/03/accordion-madness )
read 234 comments(#comments-title)
by Karl Swedberg(http://www.learningjquery.com/contact/)
A few weeks ago I wrote about two ways we can achieve the "accordion menu" effect, and I promised to describe a third option.
Well, this is it, Option 3. But first, here is a list of my other show-hide-toggle entries, as well as Jrn Zaefferer's accordion menu
plug-in:
More Showing, More Hiding(http://www.learningjquery.com/2007/02/more-showing-more-hiding)
Slicker Show and Hide(http://www.learningjquery.com/2006/09/slicker-show-and-hide)
Basic Show and Hide(http://www.learningjquery.com/2006/09/basic-show-and-hide)
Accordion Menu Plugin(http://bassistance.de/jquery-plugins/jquery-plugin-accordion/)
Option 3: Zero or One
Remember from More Showing, More Hiding(http://www.learningjquery.com/2007/02/more-showing-more-hiding) that we are
working with a simple / structure:
PLAIN TEXT(#)
HTML:
1.
Title 12.
Lorem...3.
Title 24.
Ipsum...5.
Title 36.Dolor...7.
8.
With this option #3, we start with all of the s hidden. If we click on one of the headings, the following will slide down.
If we click on the same heading again, that will slide back up. Clicking on on any heading will also hide all of the other
s the ones that don't immediately follow it. Therefore, no more than one can be open a a time.
To achieve this, we start by hiding all of the s inside the first (:eq(0)) :
PLAIN TEXT(#)
JavaScript:
$(document).ready(function() {1.
$('div.demo-show2> div').hide();2.
});3.
Then we set up the .click()method for all of the relevant elements
PLAIN TEXT(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
of 28 2/7/2016 4:05
http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/contact/http://www.learningjquery.com/2007/02/more-showing-more-hidinghttp://www.learningjquery.com/2006/09/slicker-show-and-hidehttp://www.learningjquery.com/2006/09/basic-show-and-hidehttp://bassistance.de/jquery-plugins/jquery-plugin-accordion/http://www.learningjquery.com/2007/02/more-showing-more-hidinghttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/02/more-showing-more-hidinghttp://bassistance.de/jquery-plugins/jquery-plugin-accordion/http://www.learningjquery.com/2006/09/basic-show-and-hidehttp://www.learningjquery.com/2006/09/slicker-show-and-hidehttp://www.learningjquery.com/2007/02/more-showing-more-hidinghttp://www.learningjquery.com/contact/http://www.learningjquery.com/2007/03/accordion-madness -
7/25/2019 Accordion Madness _ Learning JQuery
2/28
JavaScript:
$(document).ready(function() {1.
// ...2.
$('div.demo-show2> h3').click(function() {3.
// ...4.
});5.
});6.
Finally, inside the .click(), we toggle the >divh3div
-
7/25/2019 Accordion Madness _ Learning JQuery
3/28
and one for all siblings of that next one, as long as they are visible s:
PLAIN TEXT(#)
JavaScript:
$(document).ready(function() {1.
$('div.demo-show2> div').hide();2.
$('div.demo-show2> h3').click(function() {3.
var$nextDiv =$(this).next();4.
var$visibleSiblings =$nextDiv.siblings('div:visible');5.
});6.
});7.
So, now that we have the two variables, let's put them to use. We want to slide any visible sibling up first and then toggle
the next using .slideToggle(). But we want this queued effect to occur only if there actually is a visible div. So, we'll use
an ifstatement.
PLAIN TEXT(#)
JavaScript:
$(document).ready(function() {1.
$('div.demo-show2> div').hide();2.
$('div.demo-show2> h3').click(function() {3.
var$nextDiv =$(this).next();4.
var$visibleSiblings =$nextDiv.siblings('div:visible');5.
6.
if ($visibleSiblings.length ) {7.
$visibleSiblings.slideUp('fast', function() {8.
$nextDiv.slideToggle('fast');9.
});10.
}11.
});12.
});13.
The trick here for getting the one effect to occur afterthe other is to put the .slideToggle()code in the .slideUp()method's
callbackfunction.
Now, we just need to add the elsecondition for those times when there aren't any visible s:
PLAIN TEXT(#)
JavaScript:
$(document).ready(function() {1.$('div.demo-show2> div').hide();2.
$('div.demo-show2> h3').click(function() {3.
var$nextDiv =$(this).next();4.
var$visibleSiblings =$nextDiv.siblings('div:visi5.
6.
if ($visibleSiblings.length ) {7.
$visibleSiblings.slideUp('fast', function() {8.
$nextDiv.slideToggle('fast');9.
});10.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
of 28 2/7/2016 4:05
http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madness -
7/25/2019 Accordion Madness _ Learning JQuery
4/28
} else {11.
$nextDiv.slideToggle('fast');12.
}13.
});14.
});15.
As you can see, for those cases we use a simple .slideToggle() on the next .
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.
Scripts included in this post:
http://www.learningjquery.com/js/more-show.js ( /js/more-show.js)
Other JavaScript Files (/scripts-used-on-this-site/)
comment feed(http://www.learningjquery.com/2007/03/accordion-madness/feed)
234 comments
Newer Comments (http://www.learningjquery.com/2007/03/accordion-madness/comment-page-2#comments)
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!
1.
Karl(http://www.englishrules.com)
March 5, 2007 at 11:20 am
Yes, thanks for adding that hint, Ty. There are multifarious ways to pre
2.
Luis Martins
March 5, 2007 at 1:37 pm
It doesnt behave quite right on IE7, but excellent work. Thanks.
3.
Karl(http://www.englishrules.com)
March 5, 2007 at 2:21 pm
4.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
of 28 2/7/2016 4:05
http://www.learningjquery.com/js/more-show.jshttp://www.learningjquery.com/2007/03/accordion-madness/feedhttp://www.learningjquery.com/2007/03/accordion-madness/comment-page-2#commentshttp://www.englishrules.com/http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madness/comment-page-2#commentshttp://www.learningjquery.com/2007/03/accordion-madness/feedhttp://www.learningjquery.com/js/more-show.js -
7/25/2019 Accordion Madness _ Learning JQuery
5/28
-
7/25/2019 Accordion Madness _ Learning JQuery
6/28
March 6, 2007 at 5:19 pm
Very much appreciated :)
One little question if you don't mind;
I know that in JavaScript, you can set a fixed speed (don't ask me how though).
Is it possible to make the animation slower? I see you used 'fast'
as a tag in JavaScript... is that the speed-indicator?
Thanks in advance (again) :)
Karl(http://www.englishrules.com)
March 6, 2007 at 6:07 pm
Hey Joram, no problem.
Yeah, I set the animation to "fast" but you can set it to whatever you want, either by using a label ("fast" or "slow" or
"normal") or by using a number. Numeric speeds are in milliseconds and don't take quotation marks.
So, if you wanted the .slideToggle()effect to take a full second, you would do this:
.slideToggle(1000).
10.
Joram Oudenaarde
March 7, 2007 at 8:05 am
Thanks again Karl :)
Time to experiment, hehe.
11.
Chris Ovenden
March 9, 2007 at 12:23 pm
IMO the first version of this is exactly how these things should be done: accessible, usable, non-intrusive (and no motion
sickness...) Excellent work, Karl!
12.
YanskyMarch 10, 2007 at 6:17 pm
Hi guys, this isn't a comment on the post as such, but a tutorial suggestion. Could you write a tutorial about the use of
"$(this)" within a callback and the right way to use it in different circumstances? I seem to always have trouble with
understanding how it works and the proper syntax with which to use it.
For example, I was recently trying to replace text in an array, and even though I managed to figure it out (with great help
from the mailing list), I still don't fully understand "$(this)". :-)
This was my text replace code BTW:
$('a > span').contains('index.cfm?a=wiki&tag=').each(func
var $this = $(this);
$this.html( $this.html().replace( /index.cfm\?\a\=wiki\&t
dotted #773300", color: "#773300", "text-decoration": "no
});
13.
Nicki
March 17, 2007 at 11:46 am
Hi, little question: how can i show the first div visible on startup?
14.
Karl(http://www.englishrules.com)15.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
7/28
March 17, 2007 at 1:43 pm
Hi Nicki,
Look at Option 2 in More Showing, More Hiding(/2007/02/more-showing-more-hiding) for an example of making the first
divinitially visible. If you have any further questions after reading through that one, drop in another comment.
Justin
April 2, 2007 at 4:35 pm
Hey, Karl. I love the tutorial. It's really helped me a lot. My issue is that I'm using nested lists to structure my navigation and
.siblings obviously won't work for that. Do you have any insight on how I might remedy this issue? I'm new to this so I don't
know how to traverse the dom to find the elements I need to hide.
$(document).ready(function() {
$("ul.demo> li> ul").hide();
$("ul.demo> li> span").click(function() {
$(this).next("ul").slideToggle("fast").siblings("ul.subnav:visible").slideUp("fast");
});
});
Desktop computers (+(#) )
AMD
Intel
Notebook computers (+(#) )
AMD
Intel
16.
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');
17.
Karl(http://www.englishrules.com)
April 3, 2007 at 3:26 pm
Hey Justin, glad to hear you got help with that. Sorry I couldn't reply to
18.
api3376
April 10, 2007 at 9:49 am
hi everyone!
i'd like to use accordion in horizontal mode..
does anyone know a way to do that??????
help me ;)
thanks
19.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
8/28
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 ?
20.
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');
});
21.
BrentApril 30, 2007 at 12:11 pm
Thanks a lot for your article, this helped me in a jam!
22.
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.
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.
-
7/25/2019 Accordion Madness _ Learning JQuery
9/28
1 This is the box that will be shown and hidden and toggled at your whim.
2 This is the box that will be shown and hidden and toggled at your whim.
3 This is the box that will be shown and hidden and toggled at your whim.
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
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
Tell a Friend
Lorem ipsum dolor.
Subscribe to Newsletter
In tincidunt nisi tempus feliss.
Title 3
In tincidunt nisi tempus felis. Donec aliquam,
and I'm calling 2 .js files in the 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');
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
Any help would be great I'm really stumped on this one. Works fine in
24.
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.
Let me know if it works for you, too.
25.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
10/28
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.
26.
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 beforethe 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!
27.
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)
28.
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');
});
});
or Title1 + Title2 at the same time
$(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');
});
});
or Title1+ Title2+Title3 at the same time
$(document).ready(function() {
$('div.demo-show2:eq(0) > div:gt(2)').hide();
$('div.demo-show2> h3').click(function() {
$(this).next('div').slideToggle('normal')
29.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
0 of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.mickykelleher.com/golf/http://www.mickykelleher.com/golf/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.mickykelleher.com/golf/http://www.mickykelleher.com/golf/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
11/28
.siblings('div:visible').slideUp('normal');
});
});
Thank you.
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.
30.
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.
31.
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
32.
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!
33.
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
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.
34.
mpmchugh
June 8, 2007 at 9:45 pm
Hi,
How would one best go about having the selected header change colo
selected?
Thanks.
-mpm
35.
huphtur36.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
1 of 28 2/7/2016 4:05
http://estudio5.org/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://estudio5.org/ -
7/25/2019 Accordion Madness _ Learning JQuery
12/28
July 5, 2007 at 2:29 pm
mpmchugh: maybe look into addClass(http://docs.jquery.com/DOM/Attributes#addClass.28_class_.29) ?
Karl: Any tips on how to get anchors to work ala how moo.fx(http://moofx.mad4milk.net/#gethelp) does it?
Karl(http://www.englishrules.com)
July 5, 2007 at 2:44 pm
Hi huphtur,
Maybe use this script in conjunction with Interface's .ScrollTo() method in the FX module? Take a look at the FX
documentation(http://interface.eyecon.ro/docs/fx) and see if it'll do what you're shooting for. If not, let me know.
37.
huphtur
July 5, 2007 at 9:07 pm
Karl: not sure how Interface's .Scrollto() would help with this. Basically I need to know how I can use the jquery/accordion
madness to open an anchor with an id attribute. For instance: Title2, or Title1 (your demo with some added markup). I've
been searching jquery docs for anchor and target info, but have been unable to find anything. Maybe I'm looking at the
wrong stuff?
38.
Karl(http://www.englishrules.com)
July 5, 2007 at 11:00 pm
Oh, sorry huphtur. Totally misread your question. I just took another look at the moo.fx page that you linked to, and, I have
to say, I don't get why they're using those anchors in the way that they are. For example, they have what's new, but they don't have anything on the page with id="whatsnew"or even an old-school
anchor like . 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!
39.
huphtur
July 6, 2007 at 1:44 pm
That's indeed what I was looking for. Thanks for the tips!
40.
Justin
July 17, 2007 at 3:57 pm
Karl,
On the apple site they have their own version of what appears to be awhen you mouseover. I'm sure you've seen it already.
My question: Have you been able to mimic this effect with jQuery. On
bottom will always make some sort of bumping motion. Depending on
I've been able to minimize it, but never get rid of it like Apple has. Any
approach.
link for reference: http://www.apple.com/mac/(http://www.apple.com/
41.
Karl(http://www.englishrules.com)42.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
2 of 28 2/7/2016 4:05
http://docs.jquery.com/DOM/Attributes#addClass.28_class_.29http://moofx.mad4milk.net/#gethelphttp://www.englishrules.com/http://interface.eyecon.ro/docs/fxhttp://www.englishrules.com/http://www.apple.com/mac/http://www.apple.com/mac/http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/http://www.apple.com/mac/http://www.apple.com/mac/http://www.englishrules.com/http://interface.eyecon.ro/docs/fxhttp://www.englishrules.com/http://moofx.mad4milk.net/#gethelphttp://docs.jquery.com/DOM/Attributes#addClass.28_class_.29 -
7/25/2019 Accordion Madness _ Learning JQuery
13/28
July 19, 2007 at 9:55 am
Hi Justin,
I'm not seeing the "bumping motion" in the examples above for this blog entry. I might not be understanding what you
mean by "bumping," though. One thing you might want to try is setting a height for the containing element like Apple does.
That way, everything below it will stay in the same spot even during the sliding animations. Hope that helps point you in the
right direction. If this doesn't make sense or doesn't work for you, let me know and I'll try to put up a demo over the
weekend.
Justin
July 19, 2007 at 12:59 pm
K. Bumping may have been a bad description. It's also more noticeable when you have more than 3 tabs. I will try to
describe it better:
In the last example on this page before these comments, if Title 1 is open and i click Title 2, then title 3 moves up with it. If
you set the show and hide to the same speed, then title 3 will just make a small move down and up, a "bump" if you will.
You can see it in my example here:
http://www.robustness.org/dev/jquery/slider/slider-jquery.html(http://www.robustness.org/dev/jquery/slider/slider-
jquery.html)
(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.
43.
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 thejQuery
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.
44.
Bobby Digital
July 23, 2007 at 8:54 pm
I know someone else asked this but I can't find the solution anywhere.
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"
clue what I am doing.The class changes but stays that way when I clic
Any ideas?
45.
Bobby Digital46.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
3 of 28 2/7/2016 4:05
http://www.robustness.org/dev/jquery/slider/slider-jquery.htmlhttp://www.robustness.org/dev/jquery/slider/sliderhttp://www.englishrules.com/http://groups.google.com/group/jquery-enhttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://groups.google.com/group/jquery-enhttp://www.englishrules.com/http://www.robustness.org/dev/jquery/slider/sliderhttp://www.robustness.org/dev/jquery/slider/slider-jquery.html -
7/25/2019 Accordion Madness _ Learning JQuery
14/28
July 23, 2007 at 9:16 pm
Woops, I posted the wrong code. This is as far as I can get here:
$(document).ready(function() {
$('div.demo-show2:eq(0) > div').hide();
$('div.demo-show2:eq(0) > h3').click(function() {
$(this).next('div').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
$(this).toggleClass('active')
.siblings('h3').toggleClass('normal');
});
});
Bobby Digital
July 23, 2007 at 9:19 pm
Wow, I actually figured it out! Jquery is easy!!
$(document).ready(function() {
$('div.demo-show2:eq(0) > div').hide();
$('div.demo-show2:eq(0) > h3').click(function() {
$(this).next('div').slideToggle('fast')
.siblings('div:visible').slideUp('fast');
$(this).addClass('arrow-down')
.siblings('h3').removeClass('arrow-down');
});
});
47.
Karl(http://www.englishrules.com)
July 23, 2007 at 10:02 pm
Hey Bobby, Congratulations! I'm glad I didn't see your posts until now. It's so much more satisfying to figure these things
out on your own, isn't it? Don't hesitate to ask for help, though, if you run into any further snags.
48.
matthew smith(http://squaredeye.com)
July 24, 2007 at 2:24 pm
I'm trying to accomplish something similar, but haven't figured out how to add Bobby's idead
(http://www.learningjquery.com/2007/03/accordion-madness#comment-8811) to my set up.
I'm curently using this html:
Services
For the web
Web DesignSquared Eye is known for our attention to detail, our lovcan take your needs and find a web solution for them.
Web DevelopmentIf you need your website to live and breath to do moreEye can take your site to the next level, integrating anyof helpful technologies in-between.
and this JS:
49.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
4 of 28 2/7/2016 4:05
http://www.englishrules.com/http://squaredeye.com/http://www.learningjquery.com/2007/03/accordion-madness#comment-8811http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madness#comment-8811http://squaredeye.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
15/28
$(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()
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.
50.
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 :)
51.
Karl(http://www.englishrules.com)
July 25, 2007 at 11:09 am
Hi Matthew, no worries.
It looks like you're sliding down the
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
s are contained within
separate s, they aren't siblings.
Try replacing this line:
var $visibleSiblings = $nextDiv.siblings('p:visible');
with this:
var $visibleSiblings = $(this).parent().siblings().find('
Let me know how that goes.
52.
matthew smith(http://squaredeye.com)
July 25, 2007 at 9:21 pm
Karl,
Thanks, that did the trick. To understand it correctly the $(this).pare
unordered list?
On another note, in accordance with the comments above about addin
paragraph is open or closed.
53.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
5 of 28 2/7/2016 4:05
http://www.englishrules.com/http://squaredeye.com/http://squaredeye.com/designhttp://www.englishrules.com/http://squaredeye.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://squaredeye.com/http://www.englishrules.com/http://squaredeye.com/designhttp://squaredeye.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
16/28
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.
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 h4within each lihas only one sibling -- a p. So,
you need to go up from the clicked h4to 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 shouldwork. 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/) .
54.
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').
55.
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
56.
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');
});
57.
Caleb
July 31, 2007 at 6:48 pm
thanks justin! :)
58.
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 ot
open and close to fill it?
Thanks
Mitch
59.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
6 of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.whatbird.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.whatbird.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
17/28
Karl(http://www.englishrules.com)
August 1, 2007 at 3:43 pm
Hi Mitch,
Sure. I think all you need to do is set the height of the menu's containing element in your stylesheet. If that doesn't make
sense, let me know and I'll explain further.
60.
Jing Jok(http://www.jingjok.com)
August 21, 2007 at 4:34 pm
does anyone know how this side scrolling effect is achieved?
http://www.hotel-oxford.ro/(http://www.hotel-oxford.ro/)
It uses moo.tools.js and a clever http:// call in a file called core.js and another named core.ajax.js . The scrolling effect
seems to be buried in the last third of the page:
... "&contact=1&ajax=1" load_content('contact_div', SITE_ROOT, poststr)...
I can get everything to work except for the sliding action of each "page" even though all the code is on the index page
itself. Just looking for a tip on how the core.js interacts with the info on the index page.
I just thought this would be a good question for the Jscript / JAVAscript gurus.
61.
Big Brad
August 29, 2007 at 4:54 am
I'm having no issues with the working of the accordion ... it's brilliant infact.
What I was wondering was the following:
i managed to set image backgrounds for the h3's in the css for a:link as well as a:hover - and they work fine.
what i cannot wrap my head around is how I would be able to create a "active" state with yet another img background.
any takers?
62.
Karl(http://www.englishrules.com)August 29, 2007 at 1:55 pm
Hi Brad,
I'd use a single background image and shift either its x or y position. For example, if your h3s are 24px tall, you could do
something like this:
h3 a {
background: url(my-image.jpg) no-repeat 0 0;
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
63.
caleb
September 3, 2007 at 8:44 pm
64.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
7 of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.jingjok.com/http://www.jingjok.com/http://www.hotel-oxford.ro/http://www.hotel-oxford.ro/http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/http://www.hotel-oxford.ro/http://www.hotel-oxford.ro/http://www.jingjok.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
18/28
is it possible to click and open all ? if so, how can i do that?
thanks :)
Karl(http://www.englishrules.com)
September 3, 2007 at 8:54 pm
Hi Caleb, inside the .click(), just do $(this).siblings('div').slideDown();
65.
caleb
September 3, 2007 at 11:29 pm
hi karl,
sorry but i'm not very good at javascript.
what's the div variable?
heres an example of what i got.
http://oonagi.org/test/(http://oonagi.org/test/)
my js file is here.
thanks so much. :)
66.
Karl(http://www.englishrules.com)
September 4, 2007 at 9:35 am
Hi Caleb, I'm guessing now that you want a separate element that, when clicked, will open all of the hidden items, but I'm
not sure because I can't see anything on that page that you might want to bind to that behavior.
The first thing I'd do is change all those spanelements to divs, because they contain paragraphs. spans should only
contain inline elements.
Then, try something like this (inside your document.ready):
$('someElement').click(function() {
$('div.show-hide > div').slideToggle();
});
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
btw, in my previous example, divisn't a variable; it's an element.
Hope that helps
67.
eric maguire(http://geekfed.com)
September 4, 2007 at 9:02 pm
Hey all
Great tutorial...new to jquery but am loving it switch from mootools and
i have multiple instances of a div with the content i want to hide at first
problem is with only showing one div at a time... the way it works now i
and the previous one will still show itself until you toggle it. here is the
68.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
8 of 28 2/7/2016 4:05
http://www.englishrules.com/http://oonagi.org/test/http://oonagi.org/test/http://www.englishrules.com/http://geekfed.com/http://geekfed.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://geekfed.com/http://www.englishrules.com/http://oonagi.org/test/http://oonagi.org/test/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
19/28
GLAAD Accepts Jerry's Mea Culpa
- 4 Sep 2007 |
Show/Hide
Filed under: TV
TMZ.com: After Jerry Lewis apologized
... Read more
Lewis Takes Foot Out of Mouth, Issues Statement
- 4 Sep 2007 |
Show/Hide
Filed under: TV,
Wacky and Weird
TMZ.com: Alleged comedian Jerry Lewis has issued...
... Read more
and here is the js
$(document).ready(function() {
$('div.moduleDescription> div').hide();
$('div.moduleDescription> h6').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:vis
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
9 of 28 2/7/2016 4:05
http://www.tmz.com/2007/09/04/glaad-accepts-jerrys-mea-culpa/http://www.tmz.com/category/tv/http://www.tmz.com/http://www.tmz.com/2007/09/04/glaad-accepts-jerrys-mea-culpa/http://www.tmz.com/2007/09/04/lewis-takes-foot-out-of-mouth-issues-statement/http://www.tmz.com/category/tv/http://www.tmz.com/category/wacky-and-weird/http://www.tmz.com/http://www.tmz.com/2007/09/04/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.tmz.com/2007/09/04/http://www.tmz.com/http://www.tmz.com/category/wacky-and-weird/http://www.tmz.com/category/tv/http://www.tmz.com/2007/09/04/lewis-takes-foot-out-of-mouth-issues-statement/http://www.tmz.com/2007/09/04/glaad-accepts-jerrys-mea-culpa/http://www.tmz.com/http://www.tmz.com/category/tv/http://www.tmz.com/2007/09/04/glaad-accepts-jerrys-mea-culpa/ -
7/25/2019 Accordion Madness _ Learning JQuery
20/28
} else {
$nextDiv.slideToggle('fast');
}
});
});
the test url is here:
http://celebrityfed.com/v-1-3c.php(http://celebrityfed.com/v-1-3c.php)
any help would be awesome...thank you!
Karl(http://www.englishrules.com)
September 4, 2007 at 10:47 pm
It looks like your problem is with the $visibleSiblings variable. You have each h6/div pair wrapped in its own
.
You should be able to get this working by just changing the one line. Insead of this . . .
var $visibleSiblings = $nextDiv.siblings('div:visible');
try this . . .
var $visibleSiblings = $(this).parent().siblings().children('div:visible');
69.
eric maguire
September 5, 2007 at 1:41 am
karl
thank you very much it seemed to work.....but it kinda caused an adverse effect. for some reason it is controlling the "rate
this feed" div now too. trying to figure it out....thanks a lot for the help. here is what ive got so far http://celebrityfed.com
/v-1-3c.php(http://celebrityfed.com/v-1-3c.php)
thanks again for your help!!!!!
70.
caleb
September 5, 2007 at 5:36 am
Hi Karl,
Thank for your help..
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?
71.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
0 of 28 2/7/2016 4:05
http://celebrityfed.com/v-1-3c.phphttp://celebrityfed.com/v-1-3c.phphttp://www.englishrules.com/http://celebrityfed.com/http://celebrityfed.com/v-1-3c.phphttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://celebrityfed.com/v-1-3c.phphttp://celebrityfed.com/http://www.englishrules.com/http://celebrityfed.com/v-1-3c.phphttp://celebrityfed.com/v-1-3c.php -
7/25/2019 Accordion Madness _ Learning JQuery
21/28
test here
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');
That should do it.
72.
Karl(http://www.englishrules.com)
September 5, 2007 at 7:39 am
Caleb, I've been shooting blind with my suggestions for you so far. It really helps me to be able to see a live demo page of
some sort. Could you post a link so that I can help you work it out?
73.
eric maguire
September 5, 2007 at 3:12 pm
karl
worked like a charm...thanks so much! keep up the good work.
-eric
74.
Simon
September 7, 2007 at 4:55 am
Hi Karl,
What version is the jquery.js file are you using in this examples?
Im having a problem with getting the effects to run smooth in IE 6.
When using the latest version available atjQuery.com(http://jquery.com/) I get a bump at the end of the animation, but it
works fine in your examples. So I tried using your jquery.js file which solved my problem, but instead something else
stopped working as intended: when you click an already expanded item I dont want anything to happen. For some reason
when using your version of the jquery.js the menu closes and expands if you click an expanded link.
Here are two links to demonstrate what I mean:
The latest version available fromjQuery.com(http://jquery.com/) . Expanded menu does notre-expand when clicked but
theres a bump at the end of the animation in IE 6:
my jquery.js file
Your file. Works fine in IE 6, but an already expanded menu closes an
your jquery.js-file
The relevant code is the first line in the function: $("dd").click(func
the line:
$("dt:visible").not($(this).prev()).slideUp("normal")
.css("background","url('./images/content_b.png') no-rep
My intention with the code is to say slideup all the the visible dt-eleme
Am I correct assuming that .not($(this).prev()) is not handled as
jquery.js?
75.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
1 of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.englishrules.com/http://jquery.com/http://jquery.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://jquery.com/http://jquery.com/http://www.englishrules.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
22/28
Hope you understand my question, any help appreciated.
Thanks for taking your time!
Simon
Rodrigo
September 19, 2007 at 10:32 am
How do I do to make a sublink appear selected (CSS) when I click it? It should apen another page in another frame... butthe menu shoud be selected after it. I already tryed the p` parameter in the URL but didn work. Please I need help..
Thanks in advance.
76.
Karl(http://www.englishrules.com)
September 19, 2007 at 10:37 am
Rodrigo, inside your click handler, add a line like this:
$(this).addClass('selected');
Then style that class in your stylesheet.
Hope that helps.
77.
Victor
September 21, 2007 at 6:32 pm
Hi Karl,
Please, how can I make visible my hidden element (with an id="xyz") when it matches current page pathname -
(.../page.htm#xyz)? (I want to open and scroll to it from a link on the same or another page).
Thank you in advance for any hint.
78.
caleb
September 26, 2007 at 9:25 am
would it be possible to change the heading on click?say for example, on the corner of the header i have 'expand', once i click on it, the contents display while at the same time,
the word 'expand' changes to contract. im guessing the 'expand' could be just an image instead if that would make things
easier?
79.
Karl(http://www.englishrules.com)
September 26, 2007 at 12:42 pm
Hi Caleb,
Yes, this is possible. Right after the line that reads var $nextDiv = $
if ($nextDiv.is(':visible') ) {
$(this).text('expand');} else {
$(this).text('contract');
}
80.
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
81.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
2 of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
23/28
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
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
inside the 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 the same way I showed in comment 83, except that, instead of this:
if ($nextDiv.is(':visible') ) {
$(this).text('expand');
} else {
$(this).text('contract');
}
you would do this:
if ($nextDiv.is(':visible') ) {
$('span', this).text('expand');
} else {
$('span', this).text('contract');
}
82.
Scott Lenger(http://scottlenger.com)
September 27, 2007 at 5:02 pm
For a horizontal accordion you'll want to use the animate effect(http://docs.jquery.com/Effects) . Replace the codebetween the function brackets with something like this:
$(this).next('div').animate({
width:"100%"}, 250)
.siblings('div').animate({
width:"0"}, 250)
83.
Karl(http://www.englishrules.com)
September 27, 2007 at 5:27 pm
Thanks for that, Scott! Keep in mind that this will only work with jQuery
84.
Sean
September 28, 2007 at 1:55 pm
Hi Karl,
I'm at a total loss here. My keyboard is getting covered with the hair I'v
work. Tried to modify each of your show/hide related examples but to
My setup is here: http://www.appelmanncreative.com/testarea/test
/test2.html)
85.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
3 of 28 2/7/2016 4:05
http://www.englishrules.com/http://scottlenger.com/http://scottlenger.com/http://docs.jquery.com/Effectshttp://www.englishrules.com/http://www.appelmanncreative.com/testarea/test2.htmlhttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.appelmanncreative.com/testarea/test2.htmlhttp://www.englishrules.com/http://docs.jquery.com/Effectshttp://scottlenger.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
24/28
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?
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 divto 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;
});
});
});
86.
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!
87.
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 .
88.
Sean
September 28, 2007 at 7:32 pm
that's beautiful!!
thanks again for your help!
89.
Karl(http://www.englishrules.com)
September 28, 2007 at 7:37 pm
Not a problem. Glad I could help.
90.
reza
November 6, 2007 at 10:46 am
Hi,
How to add a fading effect during the slide motion?
91.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
4 of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.englishrules.com/http://test.learningjquery.com/test2.htmlhttp://test.learningjquery.com/test2.htmlhttp://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.englishrules.com/http://test.learningjquery.com/test2.htmlhttp://test.learningjquery.com/test2.htmlhttp://www.englishrules.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
25/28
Thanx a lot for help!
Karl(http://www.englishrules.com)
November 6, 2007 at 12:25 pm
Hi reza,
For that, you'll need to use the .animate()(http://docs.jquery.com/Effects/animate#paramsoptions) method. For example,
option 3a above would look like this:
$(document).ready(function() {
$('div.demo-show2> div').hide();
$('div.demo-show2> h3').click(function() {
$(this).next('div').animate({height: 'toggle', opacity: 'toggle'})
.siblings('div:visible').animate({height: 'hide', opacity: 'hide'});
});
});
92.
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?
93.
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.
94.
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.
95.
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
continue to close because it is reloading the menu. Any advise?
http://www.e6lu2eiubr.web.aplus.net/index.php?page=about_us(
/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');
96.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
5 of 28 2/7/2016 4:05
http://www.englishrules.com/http://docs.jquery.com/Effects/animate#paramsoptionshttp://www.learntechnology.net/http://www.learntechnology.net/http://www.e6lu2eiubr.web.aplus.net/index.php?page=about_ushttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.e6lu2eiubr/http://www.e6lu2eiubr.web.aplus.net/index.php?page=about_ushttp://www.learntechnology.net/http://docs.jquery.com/Effects/animate#paramsoptionshttp://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
26/28
});
});
Karl(http://www.englishrules.com)
December 6, 2007 at 9:40 pm
Hi Dustin,
Maybe something like this:
$(document).ready(function() {
$('div.demo-show > div').hide();
var hrefParts = location.href.split('=');
var thisPage = hrefParts[hrefParts.length-1];
$('div.demo-show div:has(a[href*=' + thisPage + '])').show();
$('div.demo-show > h3,h4').click(function() {
$(this).next('div').slideDown('fast')
.siblings('div:visible').slideUp('fast');
});});
97.
Dustin W. Gold
December 7, 2007 at 9:33 pm
You are a GOD! Thank you very much for your assistance. It works like a charm. I can't thank you enough. I played with it
for hours and couldn't find a solution that worked.
98.
Karl(http://www.englishrules.com)
December 7, 2007 at 9:41 pm
Dustin,
LOL. I wouldn't go that far! Still, I'm very happy that it's working for you. Enjoy!
99.
Dustin W. Gold
December 7, 2007 at 10:05 pm
Do you have any tutorials on rollover/click text swaps with jquery?
100.
Newer Comments (http://www.learningjquery.com/2007/03/accordion-madness/comment-page-2#comments)
hide pings(#)
20 Pings
davidbisset.com Accordion Madness
March 6, 2007 at 7:48 pm
[...] Another way to do the accordion menu effect using CSS [...]
1.
time design aufklappmenu zum verlieben (http://www.zeitdesig
March 20, 2007 at 1:13 pm
[...] accordion-madness [...]
2.
WebAppStory I love jQuery - Accordion Example - Code Snippets
September 25, 2007 at 5:45 pm
3.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
6 of 28 2/7/2016 4:05
http://www.englishrules.com/http://www.englishrules.com/http://www.learningjquery.com/2007/03/accordion-madness/comment-page-2#commentshttp://www.zeitdesigner.de/?p=25http://www.zeitdesigner.de/?p=25http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.zeitdesigner.de/?p=25http://www.learningjquery.com/2007/03/accordion-madness/comment-page-2#commentshttp://www.englishrules.com/http://www.englishrules.com/ -
7/25/2019 Accordion Madness _ Learning JQuery
27/28
[...] more on this kind of effect check here and [...]
Blog.Skynapse Javascript Accordians(http://blog.skynapse.com/javascript-accordians/)
November 15, 2008 at 12:51 am
[...] view demo [...]
4.
More Showing, More Hiding Study(http://dezuse.wordpress.com/2009/04/28/more-showing-more-hiding/)
April 28, 2009 at 12:56 pm
[...] More Showing, More Hiding that we are working with a simple / structure: PLAIN TEXT [...]
5.
links for 2009-05-05 Minesa IT(http://minesa.wordpress.com/2009/05/05/links-for-2009-05-05/)
May 5, 2009 at 4:04 pm
[...] Accordion Madness Learning jQuery - Tips, Techniques, Tutorials (tags: jquery javascript menu tutorial navigation
webdesign ajax css accordion) [...]
6.
18"jQuery#$!%&'( | Loves sunshine(http://robertsky123.toypark.in/archives/18-practical-application-
of-jquery-scripts-and-tutorials.html)
May 6, 2009 at 12:09 am
[...] 14. jQuery Accordion menu [...]
7.
18 jQuery scripts and tutorials to improve your portfolio Best Design Content
May 13, 2009 at 5:24 pm
[...] 14. jQuery Accordion menu [...]
8.
18 jQuery scripts to improve portfolio Themeflash.com(http://themeflash.com/?p=1402)
May 30, 2009 at 7:46 am
[...] 14. jQuery Accordion menu [...]
9.
Gian Carlo Mingati Blog Archive accordion menu con jQuery
June 8, 2009 at 4:37 am
[...] suona meglio. Ed ho deciso di condividere con voi tale idea anticipandovi che comunque ci sono gi buoni tutorial e
plugin sullargomento ma nessuno, non capisco perch, parte da un set di liste [...]
10.
jQuery multi slideToggle dans le mme cran | Supersonique Studio(http://supersonique.net/programmation/jquery-
multi-slidetoggle-dans-le-meme-ecran/)
July 29, 2009 at 1:04 pm
[...] de longue recherches, jai enfin trouv ce super tuto de Karl Swedberg (accordion-madness) en [...]
11.
18 jQuery scripts and tutorials to improve your portfolio | Webmaster 9
August 30, 2009 at 3:08 am
[...] 14. jQuery Accordion menu [...]
12.
Top 18: jQuery para el desarrollo y diseo web @ Ciberdix 2.0 :: Blog
September 29, 2009 at 9:40 am
[...] 14. jQuery Accordion menu [...]
13.
Accordion Plugins, Demos and Tutorials - Hidden Pixels(http://
resources/jquery-accordion-plugins-demos-and-tutorials/)
October 24, 2009 at 2:24 am
14.
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
7 of 28 2/7/2016 4:05
http://blog.skynapse.com/javascript-accordians/http://dezuse.wordpress.com/2009/04/28/more-showing-more-hiding/http://minesa.wordpress.com/2009/05/05/links-for-2009-05-05/http://robertsky123.toypark.in/archives/18-practical-applicationhttp://themeflash.com/?p=1402http://supersonique.net/programmation/jqueryhttp://www.hiddenpixels.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.hiddenpixels.com/http://supersonique.net/programmation/jqueryhttp://themeflash.com/?p=1402http://robertsky123.toypark.in/archives/18-practical-applicationhttp://minesa.wordpress.com/2009/05/05/links-for-2009-05-05/http://dezuse.wordpress.com/2009/04/28/more-showing-more-hiding/http://blog.skynapse.com/javascript-accordians/ -
7/25/2019 Accordion Madness _ Learning JQuery
28/28
[...] Accordion Madness [...]
Accordion menuler Open Source(http://os.laroouse.com/2009/11/accordion-menuler/)
November 7, 2009 at 5:46 pm
[...] [...]
15.
+20 excellent jquery menus tutorials | ExtraTuts(http://www.extratuts.com/excellent-jquery-menus-tutorials)
November 29, 2009 at 10:51 am
[...] from here15.Make a Mega Drop-Down Menu with jQueryvisit the tutorial from here16.accordion menuvisit the tutorial
from here17.Simple animated menu with jqueryvisit the tutorial from here18.apple style menu and improve it [...]
16.
Best Tutorials for Web Development Blog Archive Simple Accordion w/ CSS and jQuery(http://tuts.34ways.com
/2010/05/12/simple-accordion-w-css-and-jquery/)
May 11, 2010 at 10:57 pm
[...] Accordion Madness [...]
17.
Simple Accordion w/ CSS and jQuery Skul Net(http://skulnet.com/simple-accordion-w-css-and-jquery)
June 1, 2010 at 1:21 am
[...] Accordion Madness [...]
18.
Inline Expansion Why And Where To Use It | Spyre Studios(http://spyrestudios.com/inline-expansion-why-and-where-
to-use-it/)
June 3, 2010 at 12:03 pm
[...] Accordion Madness [...]
19.
Easy Accordion Menu with JQuery | Public Identity
October 27, 2010 at 8:42 am
[...] http://www.learningjquery.com/2007/03/accordion-madness (http://www.learningjquery.com/2007/03/accordion-
madness) [...]
20.
Sorry, but comments for this entry are now closed.
(http://creativecommons.org/licenses/by-sa/2.5/)
Copyright 20062016 Learning jQuery and participating authors. Written content on this site is under
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 R
with WordPress(http://wordpress.org/) .
(http://theeighthnetwork.com/)
X(#)
Accordion Madness | Learning jQuery http://www.learningjquery.com/2007/03/accordion-mad
http://os.laroouse.com/2009/11/accordion-menuler/http://www.extratuts.com/excellent-jquery-menus-tutorialshttp://tuts.34ways.com/http://skulnet.com/simple-accordion-w-css-and-jqueryhttp://spyrestudios.com/inline-expansion-why-and-wherehttp://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordionhttp://creativecommons.org/licenses/by-sa/2.5/http://www.englishrules.com/http://wordpress.org/http://theeighthnetwork.com/http://www.learningjquery.com/2007/03/accordion-madnesshttp://www.learningjquery.com/2007/03/accordion-madnesshttp://theeighthnetwork.com/http://wordpress.org/http://www.englishrules.com/http://creativecommons.org/licenses/by-sa/2.5/http://www.learningjquery.com/2007/03/accordionhttp://www.learningjquery.com/2007/03/accordion-madnesshttp://spyrestudios.com/inline-expansion-why-and-wherehttp://skulnet.com/simple-accordion-w-css-and-jqueryhttp://tuts.34ways.com/http://www.extratuts.com/excellent-jquery-menus-tutorialshttp://os.laroouse.com/2009/11/accordion-menuler/