CODEWITHSUNDEEP
jqueryaccordionjquery-easyui
Aman Mohammed
Aman Mohammed

Reputation: 2958

jQuery - jeasyui accordion all collapse

I am using the jeasyui accordion.

However by default it always shows the first accordion in open state. I want to see if I can show all the accordions in collapsed state when the page loads.

This is the link I have referred for the documentation. http://www.jeasyui.com/documentation/accordion.php

My code:

<div id="someid" class="easyui-accordion" data-options="multiple:true" >

        <div title="About Accordion" 
            style="overflow: auto; padding: 10px;" >
            <h3 style="color: #0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets
                you define your accordion component on web page more easily.</p>
        </div>

        <div title="About easyui" data-options="selected:true" style="padding: 10px;">easyui help you build your web page easily</div>

        <div title="Tree Menu">another set of information</div>

    </div>

FINAL SOLUTION:

I added the following code in the javascript function to collapse the panels.

  $(document).ready(function() {
    var panels = $('.easyui-accordion').accordion('panels');
    $.each(panels, function(){
        this.panel('collapse');
    });
    });

Upvotes: 2

Views: 2069

Answers (3)

actaram
actaram

Reputation: 2058

What you can do is, at load, get all the accordion panels and call the collapse method on each of them to collapse them:

$(document).ready(function() {
    var panels = $('#aa').accordion('panels');
    $.each(panels, function() {
        this.panel('collapse');
    });
});

Upvotes: 3

Ala&#39; Alnajjar
Ala&#39; Alnajjar

Reputation: 798

In it's documentation here,in Container Options, you can use option selected,I tried to set it's value as -1 and it worked,like this:

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="
                selected:-1" >
    <div title="Title1"  style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery. 
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

Jsbin Example

Upvotes: 0

Truezplaya
Truezplaya

Reputation: 1313

By looking at the documentation you've provided you need to set the selected property to false much link the example 

<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">

data-options="selected:false" // this is what you need in your first div

put the above in your first div. I'm driving blind as you haven't provided your code

Cheers

Truez

Upvotes: 0

Related Questions