Here is the answer!
let logo = ""
const toggleMenu = (elementId, logoName) => {
// Get all elements with class secondary_item
const secondaryMenuItems = document.querySelectorAll(".secondary_menu");
//Call second function and apply class selected to the logo that has been clicked
if (logo === logoName) {
toggleLogo()
logo = ""
}else {
toggleLogo(logoName)
logo = logoName
}
// Just do a safety check before breaking stuff up
if (secondaryMenuItems.length > 0) {
// Loop through all the items you've found
secondaryMenuItems.forEach((menuItem) => {
// If the current item in the loop, matches the one related to the logo
// Toggle the classes
// There might be a more cleaner approach but.. oh well ¯_(ツ)_/¯
if (menuItem.id == elementId) {
menuItem.classList.toggle("secondary_menu_hide");
menuItem.classList.toggle("secondary_menu_selected");
} else {
// If any other item, make sure its hidden by re-applying the hide class and removing the selected one
menuItem.classList.add("secondary_menu_hide");
menuItem.classList.remove("secondary_menu_selected");
}
});
}
};
/**
* Toggle styling for classes
* If logoName is missing -> reset styling
* @param {String} logoName name of the class of the logo
*/
const toggleLogo = (logoName) => {
const logos = document.querySelectorAll(".logo");
logos.forEach(logo => {
if (!logoName) {
logo.classList.add('logo_holder');
logo.classList.remove('logo_selected');
logo.classList.remove('reduce_opacity');
} else {
if (logo.id == logoName) {
logo.classList.toggle('logo_holder');
logo.classList.toggle('logo_selected');
logo.classList.remove('reduce_opacity');
} else {
logo.classList.add('logo_holder');
logo.classList.remove('logo_selected');
logo.classList.add('reduce_opacity');
}
}
})
}
I have spent quite few hours trying to work the solution out.
The issue is:
When I click on a logo in ring No: 1 a class ‘logo_selected’ is applied to that logo as well as class ‘reduce_opacity’ applied to the other logos, so this one stands out and people know which one is selected.
One click on one logo and then clicking on another logo, without toggling the classes back works fine, but if I click on a logo twice the classes does not work.
What it is supposed to happen when I click the second time on the same logo:
The class (‘reduce_opacity’) should be removed from all other logos and if class (‘logo_holder’) have been removed to be added back to all the logos.
I know my explanation is not very good, apologies!
Please, help me, am on the edge of smashing my head in the screen 😀
// did some changes on the HTML too
// UwU
const toggleMenu = (elementId, logoName) => {
// Get all elements with class secondary_item
const secondaryMenuItems = document.querySelectorAll(".secondary_menu");
//Call second function and apply class selected to the logo that has been clicked
toggleLogo(logoName)
// Just do a safety check before breaking stuff up
if (secondaryMenuItems.length > 0) {
// Loop through all the items you've found
secondaryMenuItems.forEach((menuItem) => {
// If the current item in the loop, matches the one related to the logo
// Toggle the classes
// There might be a more cleaner approach but.. oh well ¯_(ツ)_/¯
if (menuItem.id == elementId) {
menuItem.classList.toggle("secondary_menu_hide");
menuItem.classList.toggle("secondary_menu_selected");
} else {
// If any other item, make sure its hidden by re-applying the hide class and removing the selected one
menuItem.classList.add("secondary_menu_hide");
menuItem.classList.remove("secondary_menu_selected");
}
});
}
};
/**
* Toggle styling for classes
* If logoName is missing -> reset styling
* @param {String} logoName name of the class of the logo
*/
const toggleLogo = (logoName) => {
const logos = document.querySelectorAll(".logo");
logos.forEach(logo => {
if (!logoName) {
logo.classList.add('logo_holder');
logo.classList.remove('logo_selected');
logo.classList.remove('reduce_opacity');
} else {
if (logo.id == logoName) {
logo.classList.toggle('logo_holder');
logo.classList.toggle('logo_selected');
logo.classList.remove('reduce_opacity');
} else {
logo.classList.add('logo_holder');
logo.classList.remove('logo_selected');
logo.classList.add('reduce_opacity');
}
}
})
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#container {
background-color: beige;
display: flex;
justify-content: center;
align-items: center;
}
#sub_container {
padding: 50px;
position: relative;
height: 100vh;
width: 100vw;
}
/* Styling for first ring */
#menu {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 300px;
width: 300px;
border: 2px solid rebeccapurple;
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
background-color: beige;
opacity: 1;
z-index: 100;
}
#a2z_logo {
margin: auto;
height: 100px;
width: 100px;
border-radius: 50%;
}
#a2z_logo img {
height: 100%;
width: 100%;
object-position: center;
object-fit: contain;
}
#a2z_logo img:hover {
cursor: pointer;
}
.crm_logo {
/* height: 50px;
width: 50px; */
position: absolute;
top: 20px;
}
.crm_logo:hover {
cursor: pointer;
height: 60px;
width: 60px;
transition: 0.6s;
}
.creator_logo {
/* height: 50px;
width: 50px; */
position: absolute;
right: 20px;
}
.creator_logo:hover {
cursor: pointer;
height: 60px;
width: 60px;
transition: 0.6s;
}
.projects_logo {
/* height: 50px;
width: 50px; */
position: absolute;
bottom: 20px;
}
.projects_logo:hover {
cursor: pointer;
height: 60px;
width: 60px;
transition: 0.6s;
}
.desk_logo {
/* height: 50px;
width: 50px; */
position: absolute;
left: 20px;
}
.desk_logo:hover {
cursor: pointer;
height: 60px;
width: 60px;
transition: 0.6s;
}
.logo_holder {
height: 50px;
width: 50px;
opacity: 1;
}
.logo_holder img {
height: 100%;
width: 100%;
}
.logo_selected {
height: 60px;
width: 60px;
}
.logo_selected img {
height: 100%;
width: 100%;
}
.logo_deSelected {
height: 50px;
width: 50px;
}
.reduce_opacity {
opacity: 0.3;
transition: opacity 0.6s;
}
/* End of first ring styling */
/* Styling for second ring */
.secondary_menu_selected {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
height: 400px;
width: 400px;
border: 2px solid rebeccapurple;
position: absolute;
border-radius: 50%;
background-color: rgb(143, 147, 156);
z-index: 1;
transition: all 0.5s;
}
.secondary_menu_selected p {
color: white;
font-size: 1.5rem;
display: inline-block;
font-size: 35px;
}
.secondary_menu_selected p:hover {
cursor: pointer;
color: rebeccapurple;
}
.secondary_menu_hide {
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
}
.option_one {
position: absolute;
top: 8px;
left: 175px;
}
.option_two {
position: absolute;
top: 100px;
left: 335px;
}
.option_three {
position: absolute;
bottom: 100px;
left: 335px;
}
.option_four {
position: absolute;
bottom: 3px;
right: 175px;
}
.option_five {
position: absolute;
bottom: 100px;
right: 335px;
}
.option_six {
position: absolute;
top: 100px;
right: 335px;
}
/* End of styling for second ring */
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
<div id="container">
<div id="sub_container">
<div id="menu">
<div id="a2z_logo">
<img src="./images/a2z-logo.png" alt="A2Z Logo" onclick="toggleMenu()">
</div>
<div id="crm_logo" class="logo_holder logo crm_logo">
<img src="./images/crm-logo.png" alt="Zoho CRM Logo" onclick="toggleMenu('crm','crm_logo')">
</div>
<div id="creator_logo" class="logo_holder logo creator_logo">
<img src="./images/creator-logo.png" alt="Zoho Creator Logo" onclick="toggleMenu('creator','creator_logo')">
</div>
<div id="projects_logo" class="logo_holder logo projects_logo">
<img src="./images/projects-logo.png" alt="Zoho Projects Logo" onclick="toggleMenu('projects','projects_logo')">
</div>
<div id="desk_logo"class="logo_holder logo desk_logo">
<img src="./images/desk-logo.png" alt="Zoho Desk Logo" onclick="toggleMenu('desk','desk_logo')">
</div>
</div>
<div id="crm" class="secondary_menu secondary_menu_hide">
<p class="option_one"><span class="fab fa-accusoft"></span></p>
<p class="option_two"><span class="fab fa-500px"></span></p>
<p class="option_three"><span class="fab fa-affiliatetheme"></span></p>
<p class="option_four"><span class="fas fa-ankh"></span></p>
<p class="option_five"><span class="fab fa-asymmetrik"></span></p>
<p class="option_six"><span class="fab fa-autoprefixer"></span></p>
</div>
<div id="creator" class="secondary_menu secondary_menu_hide">
<p class="option_one"><span class="fab fa-asymmetrik"></span></p>
<p class="option_two"><span class="fab fa-autoprefixer"></span></p>
<p class="option_three"><span class="fab fa-affiliatetheme"></span></p>
<p class="option_four"><span class="fas fa-ankh"></span></p>
<p class="option_five"><span class="fab fa-accusoft"></span></p>
<p class="option_six"><span class="fab fa-500px"></span></p>
</div>
<div id="projects" class="secondary_menu secondary_menu_hide">
<p class="option_one"><span class="fab fa-accusoft"></span></p>
<p class="option_two"><span class="fab fa-500px"></span></p>
<p class="option_three"><span class="fab fa-affiliatetheme"></span></p>
<p class="option_four"><span class="fas fa-ankh"></span></p>
<p class="option_five"><span class="fab fa-asymmetrik"></span></p>
<p class="option_six"><span class="fab fa-autoprefixer"></span></p>
</div>
<div id="desk" class="secondary_menu secondary_menu_hide">
<p class="option_one"><span class="fab fa-asymmetrik"></span></p>
<p class="option_two"><span class="fab fa-autoprefixer"></span></p>
<p class="option_three"><span class="fab fa-affiliatetheme"></span></p>
<p class="option_four"><span class="fas fa-ankh"></span></p>
<p class="option_five"><span class="fab fa-accusoft"></span></p>
<p class="option_six"><span class="fab fa-500px"></span></p>
</div>
</div>
</div>
It’s not liking the codepen link because it is expected you show your basic code in the question. Questions should be self contained. We shouldn’t have to go off site just to review your initial issue. Demos are great, but only as support for what exists in the question itself
Is it intentional that the A2Z logo doesn’t seem to ever have its opacity changed – it it different from the others?
@A Haworth It is different than the others and it shouldn’t have its opacity or styles changed at all. @charlietfl Sorry I didn’t want to clutter the post / question.
Hi, it would help future readers if you could add an explanation of what you have changed as well as the code.
