Seeking guidance as a newcomer to javascript, I'm struggling to find the best way to explain this dilemma. Any advice or assistance would be greatly appreciated.
Here is the HTML code in question:
<div class="col-md-4">
<a href="stuffedd.html"><img src=""></a>
<a href="stuffedd.html"><img src=""></a>
<a href="stuffedd.html"><img src=""></a>
</div>
Upon clicking the images, the page redirects to stuffedd.html. The layout consists of two columns for images - a vertical thumbnail column and a larger image column in the middle.
Here is the structure:
<div class="middle containerscroll">
<img src="" id="Mdrie" class="img-responsive ">
<img src="" id="Mvier" class="img-responsive ">
<img src="" id="Mvijf" class="img-responsive ">
</div>
div class="col-md-9 hidden-xs hidden-sm">
<img src="" id="drie" class="img-responsive single">
<img src="" id="vier" class="img-responsive single">
<img src="" id="vijf" class="img-responsive single">
</div>
I've made some progress with jQuery :
$(document).ready(function(){
"use strict";
$( ".single" ).hide();
$( "#Mdrie" ).on('click',function() {
$('#drie').toggle();
$(".single").not('#drie').hide();
});
How can I ensure that stuffedd.html opens with the image I clicked on in the second column (all images with class .single)? Do I need to declare a variable and fill it in like this:
$( "var" ).show();
The website in question is: www.damondebacker.com in case you need to refer to it.