I have encountered a complex issue involving two problems for which I am unable to find a solution.
In the default state without hover or selection, this div displays with a purple border when selected. My concern is: How can I change the class of the icon (blue icon) when the parent div is selected?
Default State:
https://i.sstatic.net/XnGYO.png
Hover State (Icon) / Selected State (Parent Div)
https://i.sstatic.net/EeF0H.png
Another challenge: All divs with icons share the same class. I attempted a code that worked, but selecting one div resulted in all icon divs being selected (there are 4 divs and when one is selected, all are selected).
This is the complete code: https://jsfiddle.net/905hut4v/ (the results tab will not work as I need to paste all the code from the project which is under NDA). Foundation 6 is used, hence the SCSS include error.
JS
$(function() {
$('form[name="form-jeitos"] .block-jeito').on('click', function() {
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
});
$('.image-icon').on('click', function() {
$(this).siblings().toggleClass('selected');
});
$('form[name="form-jeitos"]').on('submit', function(e) {
e.preventDefault();
$(this).addClass("hide");
$('#jeito-title').addClass("hide");
var checked = $('input:checked', $(this));
$('#'+checked.val()).siblings().removeClass("is-active");
$('#'+checked.val()).addClass("is-active");
});
$('#jeito-opcoes a.back').on('click', function(e) {
e.preventDefault();
$('#jeito-opcoes .is-active').removeClass("is-active");
$('form[{"name=}"form-jeitos"]').removeClass("hide");
$('#jeito-title').removeClass("hide");
});
});
SCSS
.block-jeito {
border: 2px solid rgba(1, 33, 105, 0.1);
... (truncated for brevity)
}
By the way, in addition to the described issues, there are two other functions in the JavaScript: Upon selecting a div and clicking the submit button, the user is 'redirected' to another page by unhiding a div.