I have a unique fiddle which I have recreated based on the image provided below.
https://i.sstatic.net/UuBk2.jpg
This particular fiddle functions in such a way that when the two square boxes are clicked, another box appears at the bottom.
The JQuery code snippet I've utilized to achieve this effect is:
$("#franchisehub").click(function() {
if ($('.franchisehubtv').css('display') == "flex") {
$('.franchisehubtv').css('display', 'none');
} else {
$('#franchisehub').css('background-color', 'green');
$('#franchisehub p').css('color', 'white'); // Additional line
$('#cloudbasedmobile').css('background-color', 'white');
$('#businessanalytics').css('background-color', 'white');
$('#techsupport').css('background-color', 'white');
// more lines for color settings go here
$('.franchisehubtv').css('display', 'flex');
// more lines for display settings go here
}
});
Issue at Hand:
My goal is to change the text color inside the two squares (specifically "Franchise Hub or Cloud Based & Mobile") to white when the green image is clicked as shown in the provided screenshot.
I attempted to implement the following line to accomplish this task, but it appears to not be working:
$('#franchisehub p').css('color', 'white');