Menu
I'm attempting to create an accordion where I can expand/collapse all sections with a single click. I also need the ability for the user to open and close the sections having 0-n sections open at a time. Using several of the discussions here on stackoverflow and on jquery forums, here's the solution i've come up with: I've implemented each section as it's own accordion, where each is set to collapsible = true.
<html>
<head>
<title>Accordion Test</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script>
<link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css" type="text/css" />
<link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" />
</head>
<body>
<a onClick="expandAll()">Expand All</a>
<br>
<a onClick="collapseAll()">Collapse All</a>
<div id="accordion1" class="accord">
<h5><a href="#">section 1</a></h5>
<div>
section 1 text
</div>
</div>
<!-- orders section -->
<div id="accordion2" class="accord">
<h5><a href="#">section 2</a></h5>
<div>
section 2 text
</div>
</div>
<!-- section 3 -->
<div id="accordion3" class="accord">
<h5><a href="#">section 3</a></h5>
<div>
section 3 text
</div>
</div>
<!-- section 4 -->
<div id="accordion4">
<h5><a href="#">section 4</a></h5>
<div>
section 4 text
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$('#accordion1').accordion({
header: 'h5',
collapsible: true,
autoHeight: false
});
});
$(function() {
$('#accordion2').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion3').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion4').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
})
function expandAll() {
alert("calling expandAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":not(:has(.ui-state-active))")
.accordion("activate", 0);
}
function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
}
</script>
The problem I'm running into, is when I click the header of an open section, the section is collapsed as expected, but the header still have the "ui-state-focus" class, until I click elsewhere on the page. So what I see in the ui is the header of section just closed has the same background color as my hover effect, until I click elsewhere, and it shifts to the 'default, not focused' color.
In addition, when I use the Collapse All link, all looks great in Firefox. In IE, the last section header has the same hover-focus coloring.
Any suggestions? Do I somehow need to force the accordion to lose focus when it is closed? How would I accomplish that?
436
After attempting to over-ride my jquery-ui styles on the page, and attempting to hack the accordion javascript to remove the ui-state-focus class, a simple solution came to light.
Because my page is displaying the expected behavior when I click else where on the page, I used blur() to lose focus.
$(document).ready(function() {
// forces lose focus when accordion section closed. IE and FF.
$(".ui-accordion-header").click(function(){
$(this).blur();
});
})
To fix the collapse all issue in IE, I added 1 line to my collapseAll() method.
function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
$(".ui-accordion-header").blur();
}
Solution to implement accordion with all open panels. Panels are static and can't be closed.
Do not initialize accordion div with accordion widget!
$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset")
.find('h3')
.addClass("current ui-accordion-header ui-helper-reset ui-state-active ui-corner-top")
.prepend('<span class="ui-icon ui-icon-triangle-1-s"/>')
.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active");
this is my answer~ hope its help
for multiple open you can do like this by using existing jquery UI just add in a options beforeActivate:
my code below:
$( "#accordion" ).accordion({
header: "> div > h3",
autoHeight: false,
collapsible: true,
active: false,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp('fast'); } else { currContent.slideDown('fast'); }
return false; // Cancels the default action
}
});
refer from :jQuery UI accordion that keeps multiple sections open?
and the function collapse and expand
function accordion_expand_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
$(section).click();
}
});
}
function accordion_collapse_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-active')) {
$(section).click();
}
});
}
that's it..
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
