2

With jQuery UI, I am using the accordion and it looks pretty cool. Default the 1st tab or whatever its called is open, I want it so that they are all closed and only open when clicked. Any way of doing this?

Also, can you make the area the opens only big enough for what is actually in it? What I think is happening is the default size when opened is equal to the biggest thing in ANY of them.

Here is my example online, click the play tab and you will see what I mean. When the user first sees it he can not see the other tabs as they are off screen down below because of the big empty space. http://www.taffatech.com/Demo.html

<div id="accordion2">
     <h3>Welcome</h3>

    <div>Choose a game!</div>
     <h3>Play Game 1</h3>

    <div>
        <p>Game 1 is in development
            <div align="center">
                <canvas id="myCanvas" width="600" height="400" align="center" style="border:1px solid #ffffff;"></canvas>
            </div>
        </p>
    </div>

<h3>Play Game 2</h3>

    <div>
        <p>Game 2 is in development</p>
    </div>

<h3>Play Game 3</h3>

    <div>
        <p>Game 3 is in development</p>
    </div>
</div>
UtopiaLtd
  • 2,520
  • 1
  • 30
  • 46
bob
  • 35
  • 3

1 Answers1

0

In the options, set active to false and collapsible to true, like so:

$('div#accordion2').accordion({active: false, collapsible: true});
Simon Adcock
  • 3,554
  • 3
  • 25
  • 41