HOWTO: JQuery Accordion: link to internal toggle menu

Question

In the header of my website I have 3 random previews.

<ul id="dm_list">
<li><div id="sinistra"><script>boxsinistro_ita();</script></div></li>
<li><div id="centro"><script>boxcentrale_ita();</script></div></li>
<li><div id="destra"><script>boxdestro_ita();</script></div></li>
</ul>

Clicking one of the previews, you go in a webpage with "JQuery Accordion" Menu. For example:

• menu1
• menu2
• menu3

How can I open the "toggle" section that I click in the header?

Answer 1

Use the activate method for the Accordion. Assuming they are in the same order as the list items in your header, you can use the indexed version.

$('#dm_list > li a').click( function() {
    var index = $('#dm_list > li a').index(this);
    $('#menu').accordion('activate',index);
    return false;
});

EDIT:

Turns out it's easier than I thought if you want to specify the section to open on a different page. The accordion already handles this with the navigation option. Just make sure the hash in the url matches the id of the accordion section you want. Note this code goes on the page with the accordion.

 <script type="text/javascript">
     $(function() {
          $('#menu').accordion( { navigation: true } );
     });
 </script>

Answer 2

HTML with the menu:

<ul id="dm_list">
<li><div id="sinistra"><script>boxsinistro_ita();</script></div></li>
<li><div id="centro"><script>boxcentrale_ita();</script></div></li>
<li><div id="destra"><script>boxdestro_ita();</script></div></li>
</ul>

boxsinistro_ita() = box_centrale_ita() = boxdestro_ita() =

document.write('<a class="swith" rel="'+fotogrande[ry]+'" href='+'"'+link[ry]+'"'+'><img src="'+fotopiccola[ry]+'" border=0><b>'+titolo[ry]+'</b><br>'+descrizione[ry]+'</a>');

HTML with Accordion classes:

<div class="title">TITLE1</div>
<div class="title">TITLE2</div>
<div class="content">CONTENT1</div>
<div class="content">CONTENT2</div>