Use JQuery to take image map select and expand accordion element

Wondering if you could help me with this bit of JavaScript.. The challenge is to identify the region selected on the image map (I added ID tags but any code I’ve tried only returns the ID of the <map> and not the <area> tag.  The second task is to change whatever accordion element currently has aria-expanded=’true’ to false and tabindex from 0 to -1.  Then based on the region select on map change the corresponding accordion element to aria-expanded = true and tabindex to 0.
 
I found some articles that explain approaches but I can’t get the proper id tag from the map to be shown let alone work with the aria and tabindex elements.
<LINK REMOVED> check why here
 
Any help you can give will be greatly appreciated.
 
//IMAGE MAP
<p>
<img alt="" contenteditable="false" src="http://www.hhs.gov/iea/images/regionsmap.jpg" style=" border: 0;" usemap="#Map">
<map id="Map" name="Map">
<area alt="Region 1" id="region-1" contenteditable="false" coords="581,157,604,113,625,117,637,143,613,198,591,211,589,179" href="#" shape="poly">
<area alt="Region 3" id="region-3" contenteditable="false" coords="552,235" href="#" shape="poly">
<area alt="Region 4" id="region-4" contenteditable="false" coords="503,280,496,269,474,268,434,299,416,341,418,378,432,392,509,395,547,454,559,433,526,378,529,357,583,294,577,284,495,296" href="#" shape="poly">
<area alt="Region 5" id="region-5" contenteditable="false" coords="345,130,353,202,400,204,414,225,404,250,429,292,440,290,443,281,458,276,471,261,498,261,508,248,511,217,482,217,492,206,472,167,463,152" href="#" shape="poly">
<area alt="Region 6" id="region-6" contenteditable="false" coords="212,298,204,379,215,380,218,373,231,374,264,413,274,401,317,449,338,462,333,433,342,421,361,409,371,400,389,401,408,405,431,404,421,388,400,385,407,376,409,360,408,345,418,311,369,310,327,306" href="#" shape="poly">
<area alt="Region 7" id="region-7" contenteditable="false" coords="273,218,270,237,292,243,293,294,364,298,373,304,414,301,411,308,423,308,425,299,401,246,404,221,398,210,353,209,349,219" href="#" shape="poly">
<area alt="Region 8" id="region-8" contenteditable="false" coords="165,112,163,130,169,151,173,152,172,166,187,185,200,185,200,224,170,216,155,283,212,293,285,295,288,244,265,240,268,214,311,213,346,215,340,133" href="#" shape="poly">
<area alt="Region 9" id="region-9" contenteditable="false" coords="66,192,65,204,60,214,61,241,74,305,50,365,81,421,135,421,141,404,106,337,174,370,196,374,206,300,149,284,163,218" href="#" shape="poly">
<area alt="Region 10" id="region-10" contenteditable="false" coords="57,5,34,18,32,41,35,80,53,87,51,107,66,100,78,100,83,110,66,189,196,218,198,188,177,179,165,161,166,151,157,135,156,110,167,105,141,106,107,97,114,66,97,8" href="#" shape="poly">
<area alt="Region 2" id="region-2" contenteditable="false" coords="573,161,559,165,552,178,532,191,523,208,568,199,575,218,578,223,574,237,585,240,588,208,582,203,584,177" href="#" shape="poly">
<area alt="Region 2" id="region-2" contenteditable="false" coords="612,235,606,249,602,321,668,323,701,239" href="#" shape="poly">
<area alt="Region 3" id="region-3" contenteditable="false" coords="514,213,519,229,515,247,505,266,510,276,505,289,576,279,579,256,569,236,570,214,562,209,546,211" href="#" shape="poly">
</map>
</p>
 

Open in new window

//ACCORDION CODE (REDUCED TO 5 ELEMENTS FOR DEMO PURPOSES)
 
<div class="view-content ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
        <div class="views-row views-row-1 views-row-odd views-row-first">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span>        <span class="field-content"><a href="#map-panel_pane_1-0">Region 1</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/40" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Connecticut</a></li>
<li><a href="/peerta/taxonomy/term/41" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Maine</a></li>
<li><a href="/peerta/taxonomy/term/42" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Massachusetts</a></li>
<li><a href="/peerta/taxonomy/term/43" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New Hampshire</a></li>
<li><a href="/peerta/taxonomy/term/44" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Rhode Island</a></li>
<li class="last"><a href="/peerta/taxonomy/term/45" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Vermont</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-2 views-row-even">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-1">Region 2</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/46" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New Jersey</a></li>
<li><a href="/peerta/taxonomy/term/47" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">New York</a></li>
<li><a href="/peerta/taxonomy/term/48" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Puerto Rico</a></li>
<li class="last"><a href="/peerta/taxonomy/term/49" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Virgin Islands</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-3 views-row-odd">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-2">Region 3</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/50" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Delaware</a></li>
<li><a href="/peerta/taxonomy/term/51" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">District of Columbia</a></li>
<li><a href="/peerta/taxonomy/term/52" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Maryland</a></li>
<li><a href="/peerta/taxonomy/term/53" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Pennsylvania</a></li>
<li><a href="/peerta/taxonomy/term/54" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Virginia</a></li>
<li class="last"><a href="/peerta/taxonomy/term/55" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">West Virginia</a></li>
</ul></div></div>  </div></div>  </div>
  <div class="views-row views-row-4 views-row-even">
      
  <div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span>        <span class="field-content"><a href="#map-panel_pane_1-3">Region 4</a></span>  </div>  
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;"><div class="views-field views-field-field-region-states">        <div class="field-content"><div class="item-list"><ul><li class="first"><a href="/peerta/taxonomy/term/56" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Alabama</a></li>
<li><a href="/peerta/taxonomy/term/57" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Florida</a></li>
<li><a href="/peerta/taxonomy/term/58" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Georgia</a></li>
<li><a href="/peerta/taxonomy/term/59" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Kentucky</a></li>
<li><a href="/peerta/taxonomy/term/60" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Mississippi</a></li>
<li><a href="/peerta/taxonomy/term/61" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">North Carolina</a></li>
<li><a href="/peerta/taxonomy/term/62" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">South Carolina</a></li>
<li class="last"><a href="/peerta/taxonomy/term/63" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Tennessee</a></li>
</ul></div></div>  </div></div>  </div>  
    </div>

Open in new window

rjjiggAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
You don't  really need and ID but you can use zero based index instead.
Test page : http://jsfiddle.net/76Zhf/1/

    $("#Map area").click(function() {
        var id = $(this).attr("id");
        alert("you clicked on area " + id);
    });

Open in new window

rjjiggAuthor Commented:
Awesome, what about the second part of my question?  How do you take id attribute say 2, close whatever is currently expanded in the accordion (Region 1 in the demo code provided) and expand Region 2?  

I know we need to change the aria-expanded and noindex values but I dont know how to do that.
leakim971PluritechnicianCommented:
    $("#Map area").click(function() {
        var id = $(this).attr("id");
        accordion_number = id.replace(/\D/, "") * 1 - 1;
        $("#accordion").accordion({"active": 2}); // accordion is the ID of your accordion, I did not find one on the HTML you post...
    });

Open in new window


If you need more help, setup a working page (on complete mine) on jsfiddle

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

rjjiggAuthor Commented:
It's drupal code so may not be clear, see stripped version below.  

This is the first accordion selection where the header says "Region 1", you can see the aria-expanded and tabindex element in the second div; this one is expanded:

<div class="views-row views-row-1 views-row-odd views-row-first">      
<div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span><span class="field-content"><a href="#map-panel_pane_1-0">Region 1</a></span>
</div>  
</div>

Open in new window


This is Region 2, not expanded:
<div class="views-row views-row-2 views-row-even">      
<div class="views-field views-field-name views-accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" tabindex="-1">
<span class="ui-icon ui-icon-triangle-1-e"></span><span class="field-content"><a href="#map-panel_pane_1-1">Region 2</a></span>
</div>
</div>

Open in new window


So when you click on Region 2 on the map, aria-expanded on region 1 in the html above needs to change to false and tabindex to -1 AND region 2 in the html above needs aria-expanded set to true and tabindex to 0.

I'll try setting up a working page.
leakim971PluritechnicianCommented:
I was thnking you're using jQUeyr Accordion...
http://jqueryui.com/accordion/
rjjiggAuthor Commented:
That's exactly what we're using.. within Drupal.  I'll post replacing aria and noindex in another post, but first the accordion_number based on your code alerts NaN.  Can you fix the regex to work?

$("#Map area", context).click(function() { 
          var id = $(this).attr('id');
          var accordion_number = id.replace(/\D/, "") * 1 - 1;
          alert(accordion_number);

Open in new window

rjjiggAuthor Commented:
This did the trick:
$(".view-display-id-panel_pane_1 > .view-content").accordion({active: 2});

Open in new window


If you would be so kind as to help fix that regex, we're done!!!  Thank you so much.
rjjiggAuthor Commented:
Nevermind, this solved it..  Thanks again.

var accordion_number = id.replace("region-", "") * 1 - 1;

Open in new window

rjjiggAuthor Commented:
leakim971 got the hard part out of the way and pointed me in the right direction to finish, a little bit of digging and all is solved!  Thank you.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.