I'd like to click on a trigger and show a specific image. There are multiple triggers which would show a specific image related to it within a set. There are 4 sets The challenge for me is toggling the other images to
hide only in this 'set' when one of these triggers are clicked, as there can only be one image showing at a time in each set.
Here is the HTML I've put together thus far:
<!-- Thumbnails which can be clicked on to toggle the larger preview image -->
<div class="materials">
<a href="javascript:;" id="shirtgrey"><img src="/grey_shirt.png" height="122" width="122" /></a>
<a href="javascript:;" id="shirtred"><img src="red_shirt.png" height="122" width="122" /></a>
<a href="javascript:;" id="shirtblue"><img src="hblue_shirt.png" height="122" width="122" /></a>
<a href="javascript:;" id="shirtgreen"><img src="green_shirt.png" height="122" width="122" /></a>
</div>
<div class="collars">
<a href="javascript:;" id="collargrey"><img src="grey_collar.png" height="122" width="122" /></a>
<a href="javascript:;" id="collarred"><img src="red_collar.png" height="122" width="122" /></a>
<a href="javascript:;" id="collarblue"><img src="blue_collar.png" height="122" width="122" /></a>
<a href="javascript:;" id="collargreen"><img src="green_collar.png" height="122" width="122" /></a>
</div>
<div class="cuffs">
<a href="javascript:;" id="cuffgrey"><img src="grey_cuff.png" height="122" width="122" /></a>
<a href="javascript:;" id="cuffred"><img src="red_cuff.png" height="122" width="122" /></a>
<a href="javascript:;" id="cuffblue"><img src="blue_cuff.png" height="122" width="122" /></a>
<a href="javascript:;" id="cuffgreen"><img src="/green_cuff.png" height="122" width="122" /></a>
</div>
<div class="pockets">
<a href="javascript:;" id="pocketgrey"><img src="grey_pocket.png" height="122" width="122" /></a>
<a href="javascript:;" id="pocketred"><img src=".png" height="122" width="122" /></a>
<a href="javascript:;" id="pocketblue"><img src="blue_pocket.png" height="122" width="122" /></a>
<a href="javascript:;" id="pocketgreen"><img src="green_pocket.png" height="122" width="122" /></a>
</div>
<!-- The larger images where one from each set should be viewable at one time, triggered by the thumb clicked above -->
<div class="selectionimg">
<div class="selectShirt">
<img src="grey_shirt.png" height="250" width="250" class="selectShirtGrey show" />
<img src="red_shirt.png" height="250" width="250" class="selectShirtRed
hide" />
<img src="blue_shirt.png" height="250" width="250" class="selectShirtBlue
hide" />
<img src="green_shirt.png" height="250" width="250" class="selectShirtGreen
hide" /> </div>
<div class="selectCollar">
<img src="grey_collar.png" height="250" width="250" class="selectCollarGrey show" />
<img src="red_collar.png" height="250" width="250" class="selectCollarRed
hide" />
<img src="blue_collar.png" height="250" width="250" class="selectCollarBlue
hide" />
<img src="green_collar.png" height="250" width="250" class="selectCollarGreen
hide" /> </div>
<div class="selectCuff">
<img src="grey_cuff.png" height="250" width="250" class="selectCuffGrey show" />
<img src="red_cuff.png" height="250" width="250" class="selectCuffRed
hide" />
<img src="blue_cuff.png" height="250" width="250" class="selectCuffBlue
hide" />
<img src="green_cuff.png" height="250" width="250" class="selectCuffGreen
hide" /> </div>
<div class="selectPocket">
<img src="grey_pocket.png" height="250" width="250" class="selectPocketGrey show" />
<img src="hred_pocket.png" height="250" width="250" class="selectPocketRed
hide" />
<img src="blue_pocket.png" height="250" width="250" class="selectPocketBlue
hide" />
<img src="green_pocket.png" height="250" width="250" class="selectPocketGreen
hide" />
</div> </div>
How can jQuery be used to change a class of an image to "show" and ensure that all other images in that same div are set to a class of "
hide"?
First time posting here. I'm very efficient with HTML and CSS and have a basic understanding of jQuery. I'm learning and this just seems a little bit beyond my abilities at the moment.
I hope this all makes sense. Thanks for any help.
