I have a fiddle which I have replicated by seeing the screenshot below:
The screenshot and the fiddle is working in a way that if I hit on any of the items above the following changes happen:
- Background-color changes into green.
- Icons and Text turn into white.
The sample JQuery code which I have used in order to make that happen are:
$("#franchisehub").click(function() {
if ($('.franchisehubtv').css('display') == "flex") {
$('.arrow-down').css('display', 'none');
$('.franchisehubtv').css('display', 'none');
$('#franchisehub img.black').css('display', 'none');
} else {
resetAll();
$('#franchisehub').css('background-color', 'green');
$('#franchisehub p').css('color', 'white');
$('.franchisehubtv').css('display', 'flex');
$('#franchisehub img.black').css('display', 'none');
$('#franchisehub img.white').css('display', 'inline-block');
}
});
Problem Statement:
In the fiddle, when I hit on any of the items, the text (present in the square box) comes towards the center of the box and whereas when its not being clicked it comes outside of the square box (which I don't want to happen).
I am wondering what changes I need to make in the fiddle so that when the items are being clicked and when the items are not being clicked, it should remain at the same position.
