Скачать или смотреть How to add class "active" on element when another element is clicked?

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!How to add class "active" on element when another element is clicked?

So I have a layout with 4 different tabs, when each tab is clicked, it populates information below it. Right now, when I click on the arrow, it moves up or down based on which tab you're on. but I want the arrows to move when the entire tab is clicked on, not just the arrow. How do I set that up? Would I set an event listener up on the tab-button, to add the the class active to the dropdown-trigger ?
active
dropdown-trigger
Here is my code:


//Tab toggle for full page modal
const workMarketToggle = document.querySelector("#include const wmButton = document.querySelector("button");
const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(
".tab-button, .toggle-text, .toggle-img"
);
const contents = document.querySelectorAll(".content");
tabs &&
tabs.addEventListener("click", (e) = {
const button = e.target.closest("button");
if (!button) return;

contents.forEach((content) = content.classList.remove("active"));
tabButton.forEach((btn) = btn.classList.remove("active"));

button.classList.add("active");
const element = document.getElementById(button.dataset.id);
element.classList.add("active");
});

// Caret Dropdown for tab toggle in Full Page Modal
const caretDropdown = document.querySelectorAll(
"#dropdown-trigger .caret-dropdown"
);
const buttonNavigation = document.querySelector(".buttonWrapper");
buttonNavigation.addEventListener("click", handleClick);
function handleClick(e) {
if (e.target.matches("#dropdown-trigger .caret-dropdown")) {
caretDropdown.forEach((dropdown) = dropdown.classList.remove("active"));
e.target.classList.add("active");
}
}
#tab-toggle--workmarket .container,
#tab-toggle--profservices .container {
margin: 30px auto;
}

#tab-toggle--workmarket #include #tab-toggle--workmarket #include #tab-toggle--workmarket #include #tab-toggle--workmarket #include #tab-toggle--workmarket #include #tab-toggle--workmarket #include #tab-toggle--profservices #include #tab-toggle--profservices #include #tab-toggle--profservices #include #tab-toggle--profservices #include #tab-toggle--profservices #include #tab-toggle--profservices #tab6 {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 50px;
padding-top: 50px;
}

#tab-toggle--workmarket .wrapper,
#tab-toggle--profservices .wrapper {
max-width: 1330px;
margin: auto;
border-radius: 10px;
}

#tab-toggle--profservices .buttonWrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #include border-radius: 10px;
height: 81px;
max-width: 848px;
margin: 0 auto;
position: relative;
z-index: 12;
}

#tab-toggle--profservices .no-bg {
background-color: #include height: auto;
}

#tab-toggle--profservices .contentWrapper {
max-width: 1220px;
margin: 0 auto;
}

#tab-toggle--workmarket button.tab-button,
#tab-toggle--profservices button.tab-button {
font-family: var(--font-family-base);
color: #include }

.tab-button.tab-button-img {
background-color: #eff5ff !important;
height: 100% !important;
}

#tab-toggle--profservices button.tab-button {
border: none;
padding: 10px;
background-color: #include color: #include font-size: 18px;
cursor: pointer;
transition: 0.5s;
border-radius: 10px;
width: 202px;
height: 61px;
margin: 0 20px;
}

#tab-toggle--workmarket button:hover,
#tab-toggle--Source of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/