CODEWITHSUNDEEP
jquery
user3343724
user3343724

Reputation: 1

show one div and hide the other div's using jquery?

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>

Upvotes: 0

Views: 1889

Answers (3)

Felix
Felix

Reputation: 38102

Try to replace all your code with:

$("#videoContainer div").hide();

$("map#Map").click(function(ev){
    var target = $(ev.target),
        areaIndex = target.index('area');

    $("#videoContainer div:eq(" +  areaIndex + ")").hide().siblings().show();
});

Upvotes: 0

MilMike
MilMike

Reputation: 12831

try this:

HTML Part:

 <map name="Map"
  id="Map">
    <area data-goto="vid_1" item="menu_apps" id="vid_One" shape="circle"
    coords="68,139,32" href="#" />
    <area data-goto="vid_2" item="menu_apps" id="vid_Tow" shape="circle"
    coords="159,141,32" href="#" />
  </map>

JS:

$("#Map area").click(function(){
  $("#videoContainer div").hide();
  $("#" + $(this).data("goto")).show();
});

the code should hide all div elements in #videoContainer. And then show the div with the id using the data-goto value in the area element

Upvotes: 1

Awlad Liton
Awlad Liton

Reputation: 9351

You have been facing this issue for you just show one div but did not hide other div.

Use css class say .show and .hide. You need to use show class for one div which will display and hide class for other div those will be hide. and you need to make sure that only one div has show class at a time.

try like this:

 $("map#Map").click(function(ev){
        var target = $(ev.target);
        var targetId = target.attr('id');
        if(targetId == 'vid_One') {
          $(".show").removeClass("show").addClass('hide'); // remove previous div show class and hide it
          $("#vid_1").removeClass('hide').addClass("show");// remove previous div hide class and show it
        }
        });

let me know if you have any confusion :)

Upvotes: 0

Related Questions