Question

I’ve searched all over and havent quite found the answer for my particular question.

I have a simple jquery accordion and I want to be able to activate a particular section from an internal link. The link is coming from an image map so a viewer clicks on a region of the image and it activates that section of the accordion. Seems simple enough but I’m having a hell of a time with it.

So for example I have so far:

$(function() {
$( "#myaccordion" ).accordion({
    active: false, 
    autoHeight: false, 
    navigation: true        
});
});

<img src="Map.png" name="map" width="650" height="336" usemap="#hotspot" id="mymap" />

<map name="hotspot" id="hotspot">
    <area shape="poly" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />
    <area shape="poly" coords="155,223,133,194,96" href="#section2" target="_self" alt="section2" />
</map>

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

I know based on what I’ve been able to find that this code is a ways off from what it needs to be but this is the most I can figure out at the moment.

The closest I’ve been able to get based on some of the other threads is to activate a section from an external link using an href# but I need that to happen without reloading the page.

Answer 1

By giving your section headings id attributes, you can simply click() on them and it will activate that section of the drop down:

<h3 id="acc_1"><a href="#section1">Section 1</a></h3>
<div>
    <p>
    Section 1 content
    </p>
</div>
<h3 id="acc_2"><a href="#section2">Section 2</a></h3>
.... <!-- and so forth -->

In your area tags, you can add onclick attributes like so:

<area shape="poly" onclick="$('#acc_1').click();" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />