I have a task that needs to be completed, and I want to achieve it without using jQuery. I came across a functioning example, but when I tried to implement it myself, the image would not hide as desired. Here is the portion of CSS code that is supposed to control the hiding of an image when another one is clicked on:
/*Selected image display*/
.image-gallery .big-image img:target{display:block;}
/*on select image dusplay none the default image*/
.image-gallery .big-image img:target ~ img#default{display:none;}
/*Show Default Image in first load*/
.image-gallery .big-image img#default{display:block;}
Below is the part of my HTML code where the CSS should take effect:
<div id="image-wrap">
<div class="image-gallery">
<div class="big-image">
<a href="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG"><img style="max-height: 400px" id="merge" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /></a>
<a href="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc"><img style="max-height: 400px" id="fullbody" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /></a>
<a href="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc"><img style="max-height: 400px" id="closeup" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /></a>
<img style="max-height: 400px" id="default" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" />
</div>
<ul>
<li>
<a href="#merge"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxNjAw/z/JEkAAOxyThVTcEM~/$_57.JPG" /></a></li>
<li>
<a href="#fullbody"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMDIy/z/2cEAAOxyYANTcENF/$_57.JPG?rt=nc" /></a>
</li>
<li>
<a href="#closeup"><img style="max-height: 70px" src="http://i.ebayimg.com/00/s/MTYwMFgxMTg1/z/36kAAOxy9X5TcENO/$_57.JPG?rt=nc" /></a>
</li>
</div>
</div>
For a visual representation and to see the work in progress, you can visit this link: http://jsfiddle.net/sq72x/