Ich möchte es verschachtelt machen.
Klicken Sie auf jsfiddle
Posten Sie den Code für den Fall, dass jsfiddle nicht funktioniert:
HTML< /p>
Code: Select all
Expand all
Collapse all
Section 1
Para 1
Section 2
Para 2
Section 3
Para 3
[list]
[*]List item one
[*]List item two
[*]List item three
[/list]
Section 4
para 4 - 1
Para 4 - 2
JQuery:
Code: Select all
$(function () {
$("#accordion").accordion({
collapsible:true,
active:false
});
var icons = $( "#accordion" ).accordion( "option", "icons" );
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
}).show();
$(this).attr("disabled","disabled");
$('.close').removeAttr("disabled");
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
$(this).attr("disabled","disabled");
$('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
$('.open').removeAttr("disabled");
$('.close').removeAttr("disabled");
});
});
CSS:
Code: Select all
body {
font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size:65%;
}
.accordion-expand-holder {
margin:10px 0;
}
.accordion-expand-holder .open, .accordion-expand-holder .close {
margin:0 10px 0 0;
}
Ich bin neu bei JQuery, seien Sie bitte vorsichtig.