jquery accordion jump and open to a specific section

Johannes picture Johannes · Mar 26, 2012 · Viewed 12.4k times · Source

i use jquery + jquerui in modx and the accordion. I wan't to have a horizontal menu on the top where I can jump (scroll) to the section (which opens). How would I achieve this. Right now my js looks like this:

/ Accordion
        $("#accordion").children("div").each( function() {
                var a = $(this).find("a");
                var ref = $(a).attr("href");
                $(a).attr("href", "#");
            $(this).find("div").load(ref);
        });

        $("#accordion").ajaxStop(function() {
            $(this).accordion({
                header: "h2",
                active: true,
                collapsible: true,
                clearStyle: true,
                navigation: true
            });
        });

EDIT: my accordion gets build with wayfinder:

[[Wayfinder? &startId=`6` &outerTpl=`outerTpl` &rowTpl=`rowTpl`]]

rowTpl:

<div>
        <h2><a href="[[+wf.link]]">[[+wf.title]]</a></h2>
        <div>
           <!-- placeholder for content -->
    </div>
</div>

outerTpl:

<div id="accordion">[[+wf.wrapper]]</div>

The topmenu (horizontal) gets called like this:

[[Wayfinder? &startId=`6` &outerTpl=`QouterTpl` &rowTpl=`QrowTpl`]]

QrowTpl:

<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

QouterTpl

<ul class="arrowunderline">[[+wf.wrapper]]</ul>

Thanks for help

Answer

Tuan picture Tuan · Mar 26, 2012

You can use the activate method to programmatically open an accordion panel.

See this fiddle for an example.