Javascript (NO JQUERY) Toggle Div

Question

I'm trying to toggle multiple divs with an image map. My end goal is to:

1. Start off with all divs hidden
2. Click on a div to toggle and show
3. Click on a different div to show the second div but hide all other divs
4. Click the last div I selected to hide the div

I am very new to Javascript. Literally took me forever just to get an understanding of how to even create a function to toggle. I CAN'T USE JQUERY so please don't offer any solution that requires me to use that library.

 function toggle(id) { var x = document.getElementById(id) if(x.style.display =='none') x.style.display = 'block'; else x.style.display = 'none'; }

 <img id="Image-Maps-Com-image-maps-2019-03-13-221105" src="https://picsum.photos/349/290" border="0" width="349" height="290" orgWidth="349" orgHeight="290" usemap="#image-maps-2019-03-13-221105" alt="" /> <map name="image-maps-2019-03-13-221105" id="ImageMapsCom-image-maps-2019-03-13-221105"> <area alt="" title="" href="#" onclick="toggle('unit1')" shape="rect" coords="9,164,152,263" style="outline:none;" target="_self" /> <area alt="" title="" href="#" onclick="toggle('unit2')" shape="rect" coords="198,175,328,273" style="outline:none;" target="_self" /> <area alt="" title="" href="#" onclick="toggle('unit3')" shape="rect" coords="55,25,291,132" style="outline:none;" target="_self" /> <area shape="rect" coords="347,288,349,290" alt="Image Map" style="outline:none;" title="image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /> </map> <div id="unit1" class="unit1" style="display: none;"> Hello World </div> <div id="unit2" class="unit2" style="display: none;"> This is me </div> <div id="unit3" class="unit3" style="display: none;"> Goodbye </div>

Answer 1

You can achieve that in following steps.

1. You should first have same class for all your divs
2. Use querySelectorAll() and hide all elements of class
3. Then you toogle the required id using Ternary Operator.
4. You should get all <area> and use addEventListener() instead of onclick = toggle(...)

 document.querySelectorAll('area[alt]').forEach((a,i) => { a.addEventListener('click',(e) => { e.preventDefault(); var x = document.getElementById(`unit${i+1}`) let {display} = x.style document.querySelectorAll('.unit').forEach(z => z.style.display = 'none') x.style.display = display === 'none' ? 'block' : 'none'; }) })

 <img id="Image-Maps-Com-image-maps-2019-03-13-221105" src="https://picsum.photos/349/290" border="0" width="349" height="290" orgWidth="349" orgHeight="290" usemap="#image-maps-2019-03-13-221105" alt="" /> <map name="image-maps-2019-03-13-221105" id="ImageMapsCom-image-maps-2019-03-13-221105"> <area alt="" title="" href="#" shape="rect" coords="9,164,152,263" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="rect" coords="198,175,328,273" style="outline:none;" target="_self" /> <area alt="" title="" href="#" shape="rect" coords="55,25,291,132" style="outline:none;" target="_self" /> <area shape="rect" coords="347,288,349,290" alt="Image Map" style="outline:none;" title="image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /> </map> <div id="unit1" class="unit" style="display: none;"> Hello World </div> <div id="unit2" class="unit" style="display: none;"> This is me </div> <div id="unit3" class="unit" style="display: none;"> Goodbye </div>

Answer 2

1) Get the new status for the unit you clicked .

2) Set display:none for all units .

3) Set the new status for the unit you clicked .

 function toggle(id) { var x = document.getElementById(id) ; var newStatus = (x.style.display === 'none') ? 'block' : 'none' ; var units = document.getElementsByClassName('units') ; for( var i = 0; i < units.length ; i++ ) units[i].style.display = 'none' x.style.display = newStatus ; }

 <img id="Image-Maps-Com-image-maps-2019-03-13-221105" src="https://picsum.photos/349/290" border="0" width="349" height="290" orgWidth="349" orgHeight="290" usemap="#image-maps-2019-03-13-221105" alt="" /> <map name="image-maps-2019-03-13-221105" id="ImageMapsCom-image-maps-2019-03-13-221105"> <area alt="" title="" href="#" onclick="toggle('unit1')" shape="rect" coords="9,164,152,263" style="outline:none;" target="_self" /> <area alt="" title="" href="#" onclick="toggle('unit2')" shape="rect" coords="198,175,328,273" style="outline:none;" target="_self" /> <area alt="" title="" href="#" onclick="toggle('unit3')" shape="rect" coords="55,25,291,132" style="outline:none;" target="_self" /> <area shape="rect" coords="347,288,349,290" alt="Image Map" style="outline:none;" title="image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /> </map> <div id="unit1" class="units unit1" style="display: none;"> Hello World </div> <div id="unit2" class="units unit2" style="display: none;"> This is me </div> <div id="unit3" class="units unit3" style="display: none;"> Goodbye </div>