How to activate jquery accordion from an image map href?

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.

Solution

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" />