CODEWITHSUNDEEP
javascriptjqueryjquery-uiaccordion
Dave
Dave

Reputation: 9147

jQuery Accordion 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>

Upvotes: 0

Views: 812

Answers (4)

namuol
namuol

Reputation: 9996

Here's a jsfiddle of the solution.

Slightly modified HTML: (notice the class and href attributes):

<h3><a class='acc-link' href="#1">Section 1</a></h3>
<h3><a class='acc-link' href="#2">Section 2</a></h3>
<h3><a class='acc-link' href="#3">Section 3</a></h3>
<h3><a class='acc-link' href="#4">Section 4</a></h3>

<div id="accordion">
    <h3 id="1"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="2"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="3"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
    <h3 id="4"><a href="#"></a></h3>
    <div>
        <p>content</p>
    </div>
</div>

JS using the activate method:

jQuery().ready(function() {
    var acc = $("#accordion").accordion({
            collapsible: true,
            active: false,
            navigation: true
    });

    $('.acc-link').click(function () {
        acc.accordion("activate", $(this).attr('href'));
    });
});

One thing to note: the href attribute argument passed into the activate method is interpreted as a CSS selector, which conveniently (and coincidentally) starts with the # selector, so it "just works" with any valid ID.

Upvotes: 0

amernov
amernov

Reputation: 636

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);

Upvotes: 2

jcvandan
jcvandan

Reputation: 14314

You are trying to make an accordion slide up and down when clickig elsewhere on the page? If you are then I would just call the click event of the accordion heading you wish to click.

For example with the following accordion markup:

<a href='' id='activateAccordion' />

<div id="accordion">
    <h3><a href="#section1">Section 1</a></h3>    
    <div id="section1">
        <p>content</p>
    </div>
    <h3><a href="#section2">Section 2</a></h3>
    <div id="section2">
        <p>content</p>
    </div>
</div>

You could make section 1 slide up down when clicking the link 'activateAccordion' like so:

$('#activateAccordion').click(function() {
    $('a ##section1').click();
});

Upvotes: 0

Sergei Golos
Sergei Golos

Reputation: 4350

You want something that looks more like this. 

<div id="accordion">
    <h3><a href="#1">Section 1</a></h3>    
    <div id="1">
        <p>content</p>
    </div>
    <h3><a href="#2">Section 2</a></h3>
    <div id="2">
        <p>content</p>
    </div>
    <h3><a href="#3">Section 3</a></h3>
    <div id="3">
        <p>content</p>
    </div>
    <h3><a href="#4">Section 4</a></h3>
    <div id="4">
        <p>content</p>
    </div>
</div>

Upvotes: 0

Related Questions