Hi all I've a set of accordion created dynamically, in case of 3 accordion I've the following generated html code:
<h3 value="1" id="header1" class="ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all"
role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<div id="text1">ACCORDION N1</div>
</h3>
<div id="content1">content of accordion n1</div>
<h3 value="2" id="header2" class="ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all"
role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<div id="text2">ACCORDION N2</div>
</h3>
<div id="content2">content of accordion n2</div>
<h3 value="3" id="header3" class="ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all"
role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<span class="ui-icon ui-icon-triangle-3-e"></span>
<div id="text3">ACCORDION N3</div>
</h3>
<div id="content3">content of accordion n3</div>
Now I've created a function to display the summary of the accordion when it is in collapsed mode, here's the code:
$('.clickAccordion').click(function(){
var tmpAccordionClicked = $(this);
var tmpIndex = tmpAccordionClicked.attr('value');
var tmpContent = $("#content"+tmpIndex);
if(("#header"+tmpIndex).hasClass('ui-state-active')){
$("#text"+tmpIndex).html("ACCORDION N."+tmpIndex);
}
if(("#header"+tmpIndex).hasClass('ui-state-default')){
$("#text"+tmpIndex).html(tmpContent);
}
});
It works properly only if there's only one item in accordion, otherwise if there is more than one item, if I click on accordion n.2, accordion n.1 loses its summary. The same if I click on the third, the first is collapsed with summary and the second collapsed without summary. How can i manage that? Thanks
One problem that stands out to me is your if statements:
if("#header"+tmpIndex).hasClass('ui-state-active'){...}
Should probably be
if($("#header"+tmpIndex).hasClass('ui-state-active')){...}
Hope this helps. Post a working(or not) example on jsfiddle.net for better help.
You are way over thinking things. Remember, with jQuery, keep it simple.
If you instist on the manual click you can use the following:
$('.clickAccordion').click(function(){
if ($(this).hasClass("ui-state-active")) {
$(this).find("div").html("ACCORDION N." + $(this).index());
}
else {
$(this).find("div").html($(this).next().text());
}
});
HOWEVER
There is an easier way, inside the call to the accordion if you are using jQueryUI :
$("#accordion").accordion({
activate: function(e, ui) {
ui.oldHeader.html(ui.oldPanel.text());
ui.newHeader.html("ACCORDION N." + ui.newHeader.index());
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.