I've been tinkering with Andrew-243's script to add an "expand all" option to
the jQ-UI accordion functionality, and I'd like to offer a couple minor
improvements to that script. You can see my version of the script in action
at: http://alltrees.org/ken/permanent/expand-accordion.php
1. In the last section of the JS code, use $('#container #expand').text()
instead of $('#container #expand').html() so that the script will work right
the first time. (When I was using the unmodified version of the script, it
was picking up some extra html code from the jQ-UI accordion function, and
so collapsing instead of expanding on the first click.)
2. I've changed one of the comments to more accurately reflect the action of
the script. Here's the complete JavaScript code again, with my changes in
bold:
:::::::CODE::::::
// this var will be used to tell the system whether or not
// other sections will respond to clicking on a headline
var closeOthers = true;
// check which sections are open
function checkOpen() {
// how many sections are open
var openCount = $('#container .section:visible').length;
// how many sections are there
var totalCount = $('#container .section').length;
// set closeOthers var based on if there are 1 or 0 sections open
if (openCount < 2) closeOthers = true;
// change the text in the expand link based on if
// there are more or less than half of the sections open
if (openCount > totalCount/2) {
$('#container #expand').html("Collapse All");
}
else {
$('#container #expand').html("Expand All");
}
}
// hide all sections
$('#container .section').hide();
// show the first section
$('#container .section:first').show();
// actions taken upon clicking any headline
$('#container .headline').click( function() {
// set checkSection to the section next to the headline clicked
var checkSection = $(this).next();
// if the section is open, close it, and call checkOpen
if(checkSection.is(':visible')) {
checkSection.slideUp('normal', checkOpen);
return false;
}
// if the section is closed and closeOthers
// is true, close all other open sections
else {
if (closeOthers) {
$('#container .section:visible').slideUp('normal');
}
// open the section and call checkOpen
checkSection.slideDown('normal', checkOpen);
return false;
}
});
// actions taken upon clicking the expand link
$('#container #expand').click( function() {
// if the expand link's text is 'expand all', set closeOthers
// to false, open all sections and call checkOpen
if ($('#container #expand').html() == "Expand All") {
closeOthers = false;
$('#container .section').slideDown('normal', checkOpen);
}
// if the expand link's text is 'collapse all', set closeOthers
// to true, hide all sections, and call checkOpen
else {
closeOthers = true;
// the 1 prevents nasty flickering in some browsers
$('#container .section').hide(1, checkOpen);
}
return false;
});
--
View this message in context:
http://old.nabble.com/Accordion---expand-all--tp21596331s27240p28441522.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
