• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1407
  • Last Modified:

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

0
rjjigg
Asked:
rjjigg
  • 6
  • 3
2 Solutions
 
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

0
 
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.
0
 
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
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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.
0
 
leakim971PluritechnicianCommented:
I was thnking you're using jQUeyr Accordion...
http://jqueryui.com/accordion/
0
 
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

0
 
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.
0
 
rjjiggAuthor Commented:
Nevermind, this solved it..  Thanks again.

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

Open in new window

0
 
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.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now