ansaurus

Question

Jquery UI accordion question - how would you approach this?

Answer 1

A:

Hi, I asume you have some HTML like this (I put the ID in the A-Tag):

<div id="accordion">
  <div>
    <a id="a1" href="#">First header</a>
    <div>First content</div>
  </div>
  <div>
    <a id="a2" href="#">Second header</a>
    <div>Second content</div>
  </div>
</div>

and you activate the Accordion like this:

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

The Accordion provides a method to activate a specific pane:

Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass -1 to close all (only possible with collapsible:true).

so you can use:

$("#accordion").accordion("activate", "a#a2");

to activate it via script.

crono 2009-03-15 04:31:59

In theory it should work....I cannot get it to work using a string as a selector no matter now many variations I try...what cersion of jqueryui are you using?

EJB 2009-03-15 13:36:20

This was with jquery-ui-1.7.custom.min.js and jquery-1.3.2.min.jsI would love the attach an example file... I will post a working example right away...

crono 2009-03-15 17:30:33

Answer 2

+1 A:

This is a slightly modified version the example file you get when downloading a custom JQuery UI build at http://jqueryui.com/download with only "core" and "accordion" selected.

<!DOCTYPE html>
<html>
    <head>
     <link type="text/css" href="css/smoothness/jquery-ui-1.7.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
     <script type="text/javascript">
      $(function(){

       // Accordion
       $("#accordion").accordion({ header: "h3" });

                // can be done somewhere later in the code, after init
                $('#accordion').accordion('activate' , "#a2");     
      });
     </script>

    </head>
    <body>
     <h2 class="demoHeaders">Accordion</h2>
     <div id="accordion">
      <div>
       <h3 id="a1"><a href="#">First</a></h3>
       <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
      </div>
      <div>
       <h3 id="a2"><a href="#">Second</a></h3>
       <div>Phasellus mattis tincidunt nibh.</div>
      </div>
      <div>
       <h3 id="a3"><a href="#">Third</a></h3>
       <div>Nam dui erat, auctor a, dignissim quis.</div>
      </div>
     </div>
    </body>
</html>

the selector-argument have to match the element you specified as "header" - in this example it is the H3-Tag, which got the ID. Running this code should open the second pane. Anoher way is, to specify the active pane in the init using the "active" option:

<script type="text/javascript">
$(function(){    
    $("#accordion").accordion({ header: "h3", active :"#a2"  });
});
</script>

crono 2009-03-15 17:40:44

Answer 3

A:

You could use

$("#accordion").accordion('activate' , 1);

where 0 would be the first drawer, 1 the second and so on.

mcchots 2009-06-23 11:46:55

Answer 4

A:

Thanks! This was a big help. Was having problems with all the drawers being open until I set the property header to my heading tag instead of my anchor tag.

2009-07-17 18:28:23

Answer 5

A:

Hello,

Could you please share the code where you are getting the data for the accordian from the database. I am also trying to built something similar and could use some help. Thanks, Ui Developer

UIDeveloper 2009-10-28 13:33:18

ansaurus

tags:

views:

answers:

Jquery UI accordion question - how would you approach this?

related questions