CODEWITHSUNDEEP
javascriptcsshtml
PanicBus
PanicBus

Reputation: 576

Toggle display of div when targeting icon is clicked

I have three icon images in the header. They consist of a camera, a bike, and a baby. I wante to hide/display corresponding images in the body depending on which icon is clicked. The previous image should hide as the next icon is clicked. I would also like the default on page load to be "hidden".

I also want to be able to click the icon once to show the image and again, to re-hide.

CSS

img {
    margin: 15px;
}
.camera {
    display: none;
}
.bike {
    display: none;
}
.baby {
    display: none;
}

Javascript

var _hidediv = null;

function showdiv(id) {
    if (_hidediv) _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () {
        div.style.display = 'none';
    };
}

HTML

<a onclick="showdiv('camera');"> 
    <img src="camera.png" />
</a>
<a onclick="showdiv('bike');">
    <img src="bike.png" />
    <a onclick="showdiv('baby');">
        <img src="baby.png" />

        <div id="camera" style="display: none;"> 
            <img src="camera1.jpg" />
        </div>
        <div id="bike" style="display: none;"> 
            <img src="bike1.jpg" />
        </div>
        <div id="baby" style="display: none;">
            <img src="baby1.jpg" />
        </div>

Upvotes: 4

Views: 3504

Answers (3)

achakravarty
achakravarty

Reputation: 408

You can simply attach a hide show event on the click of the anchor tag. I have used jQuery to solve the problem. What I did was that I bound the click event of the anchor tag and picked up the href of the tag which is potentially the id of the div element. Then you can just hide and show the div

$('img').click(function () {
    var divId = $(this).parent('a').attr('href');
    $('div:not(' + divId + ')').hide();
    $(divId).show();
});

You can find the complete jsFiddle here

Upvotes: 0

PanicBus
PanicBus

Reputation: 576

After some fiddling this is what I finally came up with. Works for a good image toggle.

<style type="text/css">
  .hidden { display: none; }
  .unhidden { display: inline; }
</style>

<style type="text/css">
    .hidden {
        display: none;
    }
    .unhidden {
        display: inline;
    }
</style>
<script type="text/javascript">
    function unhide(divID) {
        var item = document.getElementById(divID);
        if (item) {
            item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
        }
    }
</script>
<a href="javascript:unhide('camera');"> 
          <img src="img/camera.png" /></a>
 <a href="javascript:unhide('bike');">  
          <img src="img/bike.png" /></a>
 <a href="javascript:unhide('baby');"> 
          <img src="img/baby.png" /></a>

<div id="camera" class="hidden">
    <img src="img/camera1.jpg" />
</div>
<div id="bike" class="hidden">
    <img src="img/bike1.jpg" />
</div>
<div id="baby" class="hidden">
    <img src="img/baby1.jpg" />
</div>

Upvotes: 0

abc123
abc123

Reputation: 18853

Demo jsFiddle

HTML

<a onclick="showdiv('camera');"> 
  <img src="http://placehold.it/350x150" />
</a>
<a onclick="showdiv('bike');">
  <img src="http://placehold.it/350x200" />
</a>
<a onclick="showdiv('baby');">
  <img src="http://placehold.it/350x300" />
</a>    


<div id="camera" style="display: none;"> 
  <img src="http://placehold.it/350x150" />
</div>
<div id="bike" style="display: none;"> 
  <img src="http://placehold.it/350x200" />
</div>
<div id="baby" style="display: none;">
  <img src="http://placehold.it/350x300" />
</div>

JS

var _hidediv = null;
var previousDiv = null;
function showdiv(id) {
    if(_hidediv != null){
      _hidediv();
    }

    var div = document.getElementById(id);
    if(div != previousDiv)
    {
        div.style.display = 'block';
        _hidediv = function() { div.style.display = 'none'; };
        previousDiv = div;
    }
    else
    {
        previousDiv = null;
    }
}

CSS

img {
  margin: 15px;
}
.camera {
  display: none;
}
.bike {
  display: none;
}
.baby {
  display: none;
}

Description

This seems to satisfy all your needs.

Upvotes: 3

Related Questions