Make a DIV appear and another one to disappear

Question

I don't know how to make a hidden DIV to appear, when I click on an area on a picture.

And if a hidden DIV are visible, how to make that disappear before the new one is appearing - when I'm clicking on another click-able area on the picture.

I shall have 7 click-able areas on my pictures.

Here is a part of my HTML Page

I have just found out by testing that href JavaScript don't work

<div class="" > 
  <img src="Pictures/image7.jpg" alt="" width="449" height="436" usemap="#Map" border="0"  />
        <map name="Map" id="Map">
        
            <area id="MapRegel" alt="Regel" shape="poly"
            coords="0,235,-2,151,185,126,218,141,200,184,111,185,112,234" 
            href="javascript:document.getElementById('MapRegel').onclick = 
            document.getElementById('Regel').style.visibility = 'visible';" />                          
            
            <area id="MapHakRegel" alt="HakRegel" shape="poly"
            coords="118,284,231,282,261,228,267,168,224,145,203,188,114,187" 
            href="javascript:document.getElementById('MapRegel').onclick = 
            document.getElementById('HakRegel').style.visibility = 'visible';" />
                
        </map>
        
        <div class="Hidden" id="Regel">
            <h2>Regeln</h2>
            <p>Är den som låser eller öppnar dörren till skillnad från tryckesfallet som bara håller dörren stängd. 
            Förr fanns uttrycket att man reglar dörren. En symetrisk rektangulär kolv. </p>
        </div>
        
        <div class="Hidden" id="HakRegel">
            <h2>Tryckesfall (Fallregeln)</h2>   
            <p>Den regel som håller dörren stängd utan att vara låst och är sned till 
            utseende. Regeln är stum och tryckesfallet skjuts undan eller ger vika pga. 
            dess sneda utformning när dörren stängs.</p>
        </div>                  

        <div class="Hidden" id="Tryckesfall"></div>
        <div class="Hidden" id="TryckesRoddare"></div>
        <div class="Hidden" id="CylinderRoddare"></div>
        <div class="Hidden" id="DomsNyckelAvstand"></div>
        <div class="Hidden" id="Stolpe"></div>  
        <script type="text/javascript"> 
            document.getElementByClass('Hidden').onclick = style.visibility = 'hidden';
            document.getElementById('MapRegel').onclick = document.getElementById('Regel').style.visibility = 'visible';
            document.getElementById('MapHakRegel').onclick = document.getElementById('HakRegel').style.visibility = 'visible';
            document.getElementById('MapTryckesfall').onclick = document.getElementById('Tryckesfall').style.visibility = 'visible';
            document.getElementById('MapTryckesRoddare').onclick = document.getElementById('TryckesRoddare').style.visibility = 'visible';
            document.getElementById('MapCylinderRoddare').onclick = document.getElementById('CylinderRoddare').style.visibility = 'visible';
            document.getElementById('MapDomsNyckelAvstand').onclick = document.getElementById('DomsNyckelAvstand').style.visibility = 'visible';
            document.getElementById('MapStolpe').onclick = document.getElementById('Stolpe').style.visibility = 'visible';
        </script>
    </img>
</div>

Answer 1

Give the Hidden class to all your divs, and then you can hide a whole class of div by doing (with Jquery) :

$('.Hidden').hide();

This will hide all the div with class="Hidden"

Now let's say you want to make the div id="div_1" visible by default, then you will add:

$('#div_1').show();

Now you must create links that will open your other divs, like:

<a href="#div_3" class="open_div">Show div_3</a>

And then in jquery:

    $('.open_div').click(function(){ //when a class="open_div" is clicked
      $('.Hidden').hide(); //hide all divs
      $($(this).attr('href')).show(); //show the id="div_3" div
      return false; //return false so your browser doesn't try to open the link
    });

Hope this helps!