jQuery Accordion expand all div

2019-04-10 12:43发布

站内问答 / jQuery
1986 10 5

Is it possible to expand all components when page is load or when an event occurs? Thanks!!

10条回答
做自己的国王
2楼-- · 2019-04-10 12:49

I know I'm answering a 2-year-old question, but none of the workarounds or alternate accordion plugins worked for me, so I came up with a devastatingly simple workaround: just destroy the accordion on click of an "expand all" link, and re-initialize it on click of a "collapse all" link. Something like this:

<script type="text/javascript">
function accordionInit() {
    $("#accordion").accordion();
}

function accordionDestroy() {
    $("#accordion").accordion("destroy");
}

$(function() {
    accordionInit();
});
</script>

The expand all and collapse all links would look like this:

<a onClick="accordionDestroy()">Expand all</a> | <a onClick="accordionInit()">Collapse all</a>
查看更多
0人赞 添加讨论(0) 举报
Viruses.
3楼-- · 2019-04-10 12:56

I know that is realy too late but i found the solution today. Just simply use

function expandAll() {
$('#accordion h3').removeClass('ui-state-default')
    .addClass('ui-state-active')
    .removeClass('ui-corner-all')
    .addClass('ui-corner-top')
    .attr('aria-expanded', 'true')
    .attr('aria-selected', 'true')
    .attr('tabIndex', 0)
.find('span.ui-icon')
    .removeClass('ui-icon-triangle-1-e')
    .addClass('ui-icon-triangle-1-s')
.closest('h3').next('div')
    .show();}

link of full article

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
4楼-- · 2019-04-10 12:56

Simply use this 

$('#accordion .ui-accordion-content').show();
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
5楼-- · 2019-04-10 12:57

MultiAccordion jQuery UI plugin worked great for me: https://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

After adding the plugin reference after your jQuery UI reference, you just need to make 2 simple changes:

$("#accordion_div").multiAccordion("option", "active", [0,1]);

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
6楼-- · 2019-04-10 12:57

No, if you are referring to accordion as your tag states. From jQuery.

NOTE: If you want multiple sections open at once, don't use an accordion

http://docs.jquery.com/UI/API/1.8/Accordion

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
7楼-- · 2019-04-10 13:00

To make it unobtrusive and be hidden only if the visitor has javascript I'd put

CSS:

#divToBeHidden { display: block; }

In <head>:

$('#divToBeHidden').hide();

Bottom of <body>:

$(function() {
 $("#divToBeHidden").show(); //Or whatever means you'd prefer of showing the content
});
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)