CODEWITHSUNDEEP
javascriptjqueryhtmlcss
phillystyle123
phillystyle123

Reputation: 149

javascript for hide/show on click - want to add hide on click again

I'm using a hide/show script. The div is hidden until another div is clicked/tapped. When the user clicks on another trigger, the original hide/show div is hidden again. Here's an example- click on any of the icons.

I'd like the hide/show div to hide again if the same icon is clicked again so: click once on the icon, div shows, click same icon again, div hides.

I'm already using this script on multiple pages so I'm hoping to just amend it.

CSS & HTML:

jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});
#div1 {
  position: absolute;
  top: 145px;
  left: 310px;
  display: none;
}

#div2 {
  position: absolute;
  top: 167px;
  left: 486px;
  display: none;
}

#div3 {
  position: absolute;
  top: 125px;
  left: 630px;
  display: none;
}

#div4 {
  position: absolute;
  top: 486px;
  left: 240px;
  display: none;
}

#div5 {
  position: absolute;
  top: 457px;
  left: 710px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--clickable icons-->
<a class="showSingle" target="1"><img src="images/icon1.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="2"><img src="images/icon2.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="3"><img src="images/icon3.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="4"><img src="images/icon4.png" width="91" height="91" alt="" /></a>
<a class="showSingle" target="5"><img src="images/icon5.png" width="91" height="91" alt="" /></a>

<!--show/hide divs-->
<div id="div1" class="targetDiv"><img src="images/hover1.png" width="140" height="82" alt="" /></div>
<div id="div2" class="targetDiv"><img src="images/hover2.png" width="133" height="60" alt="" /></div>
<div id="div3" class="targetDiv"><img src="images/hover3.jpg" width="384" height="151" alt="" /></div>
<div id="div4" class="targetDiv"><img src="images/hover4.png" width="162" height="96" alt="" /></div>
<div id="div5" class="targetDiv"><img src="images/hover5.png" width="231" height="150" alt="" /></div>

Upvotes: 0

Views: 123

Answers (1)

jvk
jvk

Reputation: 2211

Here is modified your code, and as works as you expected

<div>
<div id="div1" class="targetDiv"><img  width="140" height="82" alt="" /></div>
<div id="div2" class="targetDiv"><img  width="133" height="60" alt="" /></div>
<div id="div3" class="targetDiv"><img  width="384" height="151" alt="" /></div>
<div id="div4" class="targetDiv"><img  width="162" height="96" alt="" /></div>
<div id="div5" class="targetDiv"><img  width="231" height="150" alt="" /></div>
<div>

Jquery code

    jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').bind('click', function() {
    jQuery('#div' + $(this).attr('target')).toggle('show');
    jQuery('#div' + $(this).attr('target')).siblings().hide();
  });
});

Upvotes: 0

Related Questions