I am trying to show/hide div's using image map and jquery. 

I need to show one div when an image map is clicked and hide the rest of the divs and hide the current div if another image map is clicked to display another div and so on and so forth!! 

I have the following code which will only display the div once the image map is clicked but it doesn't hide it or `(display:none;)` if another image map is clicked.

```
    <script type="text/javascript">
//<![CDATA[
    $("#vid_1").hide();
    $("#vid_2").hide();

    $("map#Map").click(function(ev){
    var target = $(ev.target);
    var targetId = target.attr('id');
    if(targetId == 'vid_One') {
      $("#vid_1").show();
    }
    });

    $("map#Map").click(function(ev){
    var target = $(ev.target);
    var targetId = target.attr('id');
    if(targetId == 'vid_Tow') {
      $("#vid_2").show();
    }
    });
    //]]>
    </script>

```

I don't want to use `$("#vid_2").show();` or `$("#vid_1").show();` etc etc after each image map is clicked as i will have so many image maps and that will make it complicated! 

could someone please help me out with this?

Thanks

EDIT:

```
<div align="center" id="wrapper">
  <div id="content">
    <div id="remote">
      <img src="images/remote.png" alt="remote" width="400"
      height="681" usemap="#Map" border="0" /> <map name="Map"
      id="Map">
        <area item="menu_apps" id="vid_One" shape="circle"
        coords="68,139,32" href="#" />
        <area item="menu_apps" id="vid_Tow" shape="circle"
        coords="159,141,32" href="#" />
      </map>
    </div>
    <div id="videoContainer">
      <div id="vid_1">
        1
      </div>
      <div id="vid_2">
        2
      </div>
    </div>
  </div>
</div>

```