Comments on: Exactly How to Create a Custom jQuery Accordion

By: Scott @sydneydesign

Scott @sydneydesign — Fri, 13 Nov 2009 04:50:20 +0000

Hi Great post thanks for the info. i’m using it and its easy to setup.

By: Accordion – Plugins, Demos and Tutorials - Hidden Pixels

Accordion – Plugins, Demos and Tutorials - Hidden Pixels — Sat, 24 Oct 2009 06:24:24 +0000

[...] Exactly How to Create a Custom jQuery Accordion [...]

By: Exactly How to Create a Custom jQuery Accordion | Apni Library

Exactly How to Create a Custom jQuery Accordion | Apni Library — Mon, 19 Oct 2009 21:55:28 +0000

[...] the original here: Exactly How to Create a Custom jQuery Accordion Bookmark or Share [...]

By: 16 Adet JQuery Accordion Eklentisi | OyunMahseni | Oyun Haberleri

16 Adet JQuery Accordion Eklentisi | OyunMahseni | Oyun Haberleri — Sat, 17 Oct 2009 06:44:40 +0000

[...] Nettuts Custom JQuery Accordion – [bağlantı] [...]

By: carlos

carlos — Mon, 12 Oct 2009 15:23:23 +0000

Gracias por la informacion esta muy buena

By: Joe

Joe — Sun, 11 Oct 2009 17:24:02 +0000

These always seem to come in useful !

By: jQuery Tutorial – Exactly How to Create a Custom jQuery Accordion | jQuery Wisdom

Sat, 26 Sep 2009 17:10:29 +0000

[...] Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively Web Site Demo Download AKPC_IDS += "433,";Popularity: unranked [?] Share and [...]

By: Brian Nelson

Brian Nelson — Thu, 17 Sep 2009 18:10:24 +0000

P.S. Here is the Javascript for the “Academic Programs” nav and pages.

/* ACADEMIC PROGRAMGS */

$(document).ready(function() {
$(’ul#accordion a.academic’).click(function() {
$(this).css(’outline’,'none’);
if($(this).parent().hasClass(’current’)) {
$(this).siblings(’ul’).slideUp(’slow’,function() {
$(this).parent().removeClass(’current’);
});
} else {
$(’ul#accordion li.current ul’).slideUp(’slow’,function() {
$(this).parent().removeClass(’current’);
});
$(this).siblings(’ul’).slideToggle(’slow’,function() {
$(this).parent().toggleClass(’current’);
});
}
return false;
});
});

$(document).ready(function() {
$(’ul#accordion a.academic-selected’).show(function() {
$(this).css(’outline’,'none’);
if($(this).parent().hasClass(’current’)) {
$(this).siblings(’ul’).slideUp(’slow’,function() {
$(this).parent().removeClass(’current’);
});
} else {
$(’ul#accordion li.current ul’).slideUp(’slow’,function() {
$(this).parent().removeClass(’current’);
});
$(this).siblings(’ul’).slideToggle(’slow’,function() {
$(this).parent().toggleClass(’current’);
});
}
return false;
});
});

$(document).ready(function() {
$(’ul#accordion a.academic-selected’).click(function() {
$(this).css(’outline’,'none’);
if($(this).parent().hasClass(’current’)) {
$(this).siblings(’ul’).slideUp(’slow’,function() {
$(this).parent().removeClass(’current’);
});
} else {
$(’ul#accordion li.current ul’).slideUp(’slow’,function() {
$(this).parent().removeClass(’current’);
});
$(this).siblings(’ul’).slideToggle(’slow’,function() {
$(this).parent().toggleClass(’current’);
});
}
return false;
});
});

Thanks again!

By: Brian Nelson

Brian Nelson — Thu, 17 Sep 2009 18:08:40 +0000

I love the accordion thanks for your hard work…I have added to my website, but I am just having a little trouble with one thing. When you click say “Academic Programs” and the accordion slides down and then you choose “Advertising” and when the “Advertising” page loads the accordion slides down once again once I’m on the newly loaded “Advertising” page. How can I keep the accordion already open without it sliding down when it is on the selected page?

http://www.unf.edu/~n00181631/adv_web/project02/index.html

Thanks for the help,

Brian

By: santiago

santiago — Thu, 17 Sep 2009 05:18:43 +0000

Good stuff, thank you Travis