Below is a snippet of my html code:
<div class="color_area">
<div class="blue" data-color="blue"></div>
<div class="green" data-color="green"></div>
<div class="red" data-color="red"></div>
</div>
<input type="checkbox" name="checkbox_click" id="checkbox_click1" value="1">
<input type="checkbox" name="checkbox_click" id="checkbox_click2" value="2">
<input type="checkbox" name="checkbox_click" id="checkbox_click3" value="3">
<div id="clickable">
<div class="click_blue1 clickable" id="blue"><img src="images/blueone.png" id="blue"></div>
<div class="click_blue2 clickable" id="blue"><img src="images/bluetwo.png" id="blue"></div>
<div class="click_blue3 clickable" id="blue"><img src="images/bluethree.png" id="blue"></div>
<div class="click_green1 clickable" id="green"><img src="images/greenone.png" id="green"></div>
<div class="click_green2 clickable" id="green"><img src="images/greentwo.png" id="green"></div>
<div class="click_green3 clickable" id="green"><img src="images/greenthree.png" id="green"></div>
<div class="click_red1 clickable" id="red"><img src="images/redone.png" id="red"></div>
<div class="click_red2 clickable" id="red"><img src="images/redtwo.png" id="red"></div>
<div class="click_red3 clickable" id="red"><img src="images/redthree.png" id="red"></div>
</div>
And now for the jQuery part:
$('#clickable div img').hide();
$('div.clickable').css('display','none');
$( ".color_area div" ).on( "click", function() {
var color = $( this ).attr( "data-color" );
$( "div.clickable" ).each( function() {
var forColor = $( this ).attr( "id" );
if( forColor == color ) {
if( $( this ).css('display') == 'block'){
$( this ).hide();
}
$( this ).addClass( "selected" );
$( this ).css('display','block');
}else {
$( this ).removeClass( "selected" );
}
});
});
$( "div.clickable" ).on( "click", function() {
if( $( this ).hasClass( "selected" ) ) {
var color = $( this ).attr( "class" );
$( this ).find('img').show();
$( "." + color + " img" ).each( function() {
$( this ).remove();
});
}
});
});
The click_red class always remains in front of div#clickable, leading to the need for toggling between display properties. I aim to select colors only once since all switch to display:block, causing the click_red class to obstruct clickability of blue and green. Any suggestions on how to resolve this issue?
Edit: To elaborate, I have an image map with 18 regions that are initially hidden. Users must first choose a color before selecting a region using the clickable area to reveal the corresponding images on the map. Essentially, it's like coloring - selecting a color highlights specific regions and displays the matching images.
Check out the fiddle here: Click Me