Question

I’m trying to using the jQuery UI according to slide open some DIVs. I want the links to be located elsewhere and target the specific DIVs dependent on their ID. How would I go about doing this? Any tips to point me in the right direction?

Something sort of like this:

<script>
    jQuery().ready(function() {
        jQuery("#accordion" ).accordion({ 
            collapsible: true, 
            active: false, 
            navigation: true 
        });
    });
</script>

and:

<h3><a href="#1">Section 1</a></h3>
<h3><a href="#2">Section 2</a></h3>
<h3><a href="#3">Section 3</a></h3>
<h3><a href="#4">Section 4</a></h3>

<div id="accordion">
    <div id="1">
        <p>content</p>
    </div>
    <div id="2">
        <p>content</p>
    </div>
    <div id="3">
        <p>content</p>
    </div>
    <div id="4">
        <p>content</p>
    </div>
</div>

Answer 1

You can use the activate method.

Signature:

.accordion( "activate" , index )

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 false to close all (only possible with collapsible:true).

Buy using $(link).click(function(){}), you can select the id of the clicked element and
pass the id in the index of the activate method like:

.accordion( "activate" , "#" + id);