Search jQuery

jQuery Forum

Using jQuery UI

jor1980

Accordion collapsible

in Using jQuery UI • 9 years ago

Hi isaw a thread talking about what i want

"Hello all,

I've been playing with jQuery UI 1.7.2 for a few weeks and had a
question related to its accordion widget.
Currently with jQuery UI 1.7.2, one of the default behaviors for the
accordion is to always keep one section open. I would like all
sections to be closed initially by default and was wondering if anyone
out there had successfully implemented that.
Thanks in advance!"

but i am trying to apply the solutions and i don´t achieve my purpose:

this is the solution:

"In addition to setting collapsible to true, set active to false:<div>

</div><div>$("#myAccordion").accordion({</div><div> active: false,</div><div> collapsible: true</div><div>});</div><div>
</div><div>-"

Replies(2)

addocdave

Re: Accordion collapsible

9 years ago

Try initializing the accordion in the header like this:

        <script type="text/javascript">
            $(function(){

                // Accordion
                $('#accordion').accordion({header: 'h3', active: false});
            });
           </script>

My accordion is in <div id="accordion">.
My accordion sections are in <h3> tags.
The active:false is what initializes the accordion with all sections closed.

Once the accordion is opened, by clicking the text in one of the <h3> tags, it stays open (one section at a time).

Hope this helps.

Bert Onst..

Re: Re: Accordion collapsible

4 years ago

For reasons I do not understand, this doesn't work for me. Here's the code. Can anyone point out what I'm doing wrong? You can see the live file here: http://www.westsidebridgeacademy.com/

<head>
...
<link href="Jquery-ui/jquery-ui-1.12.0.custom/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
    $( "#accordion" ).accordion({header: 'h3', active: false});
} );
</script>
...
</head>

<body>
<html>
...
<div id="accordion">
      <h3>About us</h3>
      <div>
        <p>Westside Bridge Academy is central and west Houston's premier venue for duplicate bridge instruction and play.</p>
        <p>We have open games every day and I/N games several times each week - see the schedule to the left for details.</p>
        <p>We are a friendly and welcoming place for you to play.</p>
        <p>Snacks, coffee, and tea are complimentary!</p>
                <p>We have the nicest directors and players!</p>
      </div>
      <h3>What we do</h3>
      <div>
        <p>You get an individual summary emailed to you only a few minutes after the game!</p>
        <p>We use "The Common Game"; for details see below. </p>
        <p>We play three boards per round, nine rounds whenever possible, and everyone plays all 27 boards. No more saying "We didn't play those boards" when comparing with your friends! It's true duplicate. </p>
        <p>We offer complimentary snacks, coffee, and tea!</p>
        <p>We have a full schedule of classes!</p>
      </div>
      <h3>The Common Game</h3>
      <div>
        <p>We play the same hands as hundreds of other clubs across the US and Canada.</p>
        <p>You see your results compared with everyone who played the hand.</p>
        <p>The results often come with expert commentary.</p>
        <p>Results are match-pointed across the entire field - hundreds of tables!</p>
        <p>Monthly winners are compiled and reported.</p>
      </div>
    </div>
...
</html>
</body>

Top Reply

Response title

Attachments

jQuery Forum

Accordion collapsible

Replies(2)

Re: Accordion collapsible

Re: Re: Accordion collapsible

Statistics

Tags

Actions

Related Posts