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 ?
Here is my code:
//Tab toggle for full page modal
const workMarketToggle = document.querySelector("#tab-toggle--workmarket");
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 #tab1,
#tab-toggle--workmarket #tab2,
#tab-toggle--workmarket #tab3,
#tab-toggle--workmarket #tab4,
#tab-toggle--workmarket #tab5,
#tab-toggle--workmarket #tab6,
#tab-toggle--profservices #tab1,
#tab-toggle--profservices #tab2,
#tab-toggle--profservices #tab3,
#tab-toggle--profservices #tab4,
#tab-toggle--profservices #tab5,
#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: #20347d;
border-radius: 10px;
height: 81px;
max-width: 848px;
margin: 0 auto;
position: relative;
z-index: 12;
}
#tab-toggle--profservices .no-bg {
background-color: #eff5ff;
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: #fff;
}
.tab-button.tab-button-img {
background-color: #eff5ff !important;
height: 100% !important;
}
#tab-toggle--profservices button.tab-button {
border: none;
padding: 10px;
background-color: #20347d;
color: #fff;
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--profservices button:hover {
background-color: #d5e3ff;
}
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button.active {
background-color: white;
margin: 0 20px;
}
#tab-toggle--workmarket button:hover,
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
color: #000;
}
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
width: 202px;
color: #33478c;
}
#tab-toggle--workmarket .active,
#tab-toggle--profservices .active {
background-color: #f3f4f6;
}
#tab-toggle--workmarket .content,
#tab-toggle--profservices .content {
display: none;
padding: 10px 20px;
}
#tab-toggle--profservices .content-regular.active {
display: flex;
justify-content: center;
padding: 70px 20px;
align-items: center;
gap: 50px;
background-color: #fff;
border-radius: 10px;
margin: 0px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}
#tab-toggle--profservices .content.active {
display: flex;
justify-content: center;
padding: 70px 20px;
align-items: center;
gap: 50px;
background-color: #fff;
border-radius: 10px;
margin: -30px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}
#dropdown-trigger {
display: block;
}
.caret-dropdown {
cursor: pointer;
top: 50%;
transform: translateY(-50%);
display: inline-block;
height: 10px;
left: 15px;
margin-top: 2px;
position: relative;
text-align: left;
transition: 0.4s ease;
transform: rotate(0);
width: 13px;
}
.caret-dropdown:after,
.caret-dropdown:before {
background-color: transparent;
border-bottom: 11px solid #444;
box-sizing: content-box;
content: "";
display: inline-block;
height: 8px;
left: 0;
position: absolute;
top: 0;
transition: 0.4s ease;
width: 3px;
}
.caret-dropdown:before {
transform: rotate(-135deg);
}
.caret-dropdown:after {
transform: rotate(135deg);
}
.caret-dropdown.active {
transform: rotate(0);
transform: translate(0, -6px);
}
.caret-dropdown.active:before {
transform: rotate(-45deg);
}
.caret-dropdown.active:after {
transform: rotate(45deg);
}<!-------- TAB TOGGLE SECTION -------->
<div class="bg-lightblue">
<div id="tab-toggle--profservices">
<div class="wrapper">
<div class="buttonWrapper no-bg gap-100">
<button class="tab-button tab-button-img active" data-id="implementation">
<img src="#" width="150" class="toggle-img" />
<h3 class="blue toggle-text">Implementation</h3>
<a href="#" id="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
<button class="tab-button tab-button-img" data-id="advisory">
<img
src="#" width="150" class="toggle-img" >
<h3 class="blue toggle-text">Advisory</h3>
<a href="#" id="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
<button class="tab-button tab-button-img" data-id="integration">
<img
src="#"
width="150"
class="toggle-img"
/>
<h3 class="blue toggle-text">Integration</h3>
<a href="#" id="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
<button class="tab-button tab-button-img" data-id="transformation">
<img
src="#"
width="150"
class="toggle-img"
/>
<h3 class="blue toggle-text">Transformation</h3>
<a href="#" id="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
</div>
<div class="contentWrapper">
<div class="content content-regular active" id="implementation">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">Info 1</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
list 1
</li>
<li>list 2</li>
<li>
list 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
<div class="content" id="advisory">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">info 2</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
list 1
</li>
<li>list 2</li>
<li>
list 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
<div class="content" id="integration">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">info 3</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
info 1
</li>
<li>
info 2
</li>
<li>
info 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
<div class="content" id="transformation">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">info 4</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
list 1
</li>
<li>list 2</li>
<li>
list 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
</div>
</div>
</div>
</div>In the event listener, find the .tab-button that contains the element that was clicked on. Then you can find the caret-dropdown within this to toggle it.
//Tab toggle for full page modal
const workMarketToggle = document.querySelector("#tab-toggle--workmarket");
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) {
let tab_button = e.target.closest("button.tab-button");
if (tab_button) {
caretDropdown.forEach((dropdown) => dropdown.classList.remove("active"));
tab_button.querySelector(".caret-dropdown").classList.add("active");
}
}#tab-toggle--workmarket .container,
#tab-toggle--profservices .container {
margin: 30px auto;
}
#tab-toggle--workmarket #tab1,
#tab-toggle--workmarket #tab2,
#tab-toggle--workmarket #tab3,
#tab-toggle--workmarket #tab4,
#tab-toggle--workmarket #tab5,
#tab-toggle--workmarket #tab6,
#tab-toggle--profservices #tab1,
#tab-toggle--profservices #tab2,
#tab-toggle--profservices #tab3,
#tab-toggle--profservices #tab4,
#tab-toggle--profservices #tab5,
#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: #20347d;
border-radius: 10px;
height: 81px;
max-width: 848px;
margin: 0 auto;
position: relative;
z-index: 12;
}
#tab-toggle--profservices .no-bg {
background-color: #eff5ff;
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: #fff;
}
.tab-button.tab-button-img {
background-color: #eff5ff !important;
height: 100% !important;
}
#tab-toggle--profservices button.tab-button {
border: none;
padding: 10px;
background-color: #20347d;
color: #fff;
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--profservices button:hover {
background-color: #d5e3ff;
}
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button.active {
background-color: white;
margin: 0 20px;
}
#tab-toggle--workmarket button:hover,
#tab-toggle--workmarket button.active,
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
color: #000;
}
#tab-toggle--profservices button:hover,
#tab-toggle--profservices button.active {
width: 202px;
color: #33478c;
}
#tab-toggle--workmarket .active,
#tab-toggle--profservices .active {
background-color: #f3f4f6;
}
#tab-toggle--workmarket .content,
#tab-toggle--profservices .content {
display: none;
padding: 10px 20px;
}
#tab-toggle--profservices .content-regular.active {
display: flex;
justify-content: center;
padding: 70px 20px;
align-items: center;
gap: 50px;
background-color: #fff;
border-radius: 10px;
margin: 0px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}
#tab-toggle--profservices .content.active {
display: flex;
justify-content: center;
padding: 70px 20px;
align-items: center;
gap: 50px;
background-color: #fff;
border-radius: 10px;
margin: -30px;
box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
}
.dropdown-trigger {
display: block;
}
.caret-dropdown {
cursor: pointer;
top: 50%;
transform: translateY(-50%);
display: inline-block;
height: 10px;
left: 15px;
margin-top: 2px;
position: relative;
text-align: left;
transition: 0.4s ease;
transform: rotate(0);
width: 13px;
}
.caret-dropdown:after,
.caret-dropdown:before {
background-color: transparent;
border-bottom: 11px solid #444;
box-sizing: content-box;
content: "";
display: inline-block;
height: 8px;
left: 0;
position: absolute;
top: 0;
transition: 0.4s ease;
width: 3px;
}
.caret-dropdown:before {
transform: rotate(-135deg);
}
.caret-dropdown:after {
transform: rotate(135deg);
}
.caret-dropdown.active {
transform: rotate(0);
transform: translate(0, -6px);
}
.caret-dropdown.active:before {
transform: rotate(-45deg);
}
.caret-dropdown.active:after {
transform: rotate(45deg);
}<!-------- TAB TOGGLE SECTION -------->
<div class="bg-lightblue">
<div id="tab-toggle--profservices">
<div class="wrapper">
<div class="buttonWrapper no-bg gap-100">
<button class="tab-button tab-button-img active" data-id="implementation">
<img src="#" width="150" class="toggle-img" />
<h3 class="blue toggle-text">Implementation</h3>
<a href="#" class="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
<button class="tab-button tab-button-img" data-id="advisory">
<img
src="#" width="150" class="toggle-img" >
<h3 class="blue toggle-text">Advisory</h3>
<a href="#" class="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
<button class="tab-button tab-button-img" data-id="integration">
<img
src="#"
width="150"
class="toggle-img"
/>
<h3 class="blue toggle-text">Integration</h3>
<a href="#" class="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
<button class="tab-button tab-button-img" data-id="transformation">
<img
src="#"
width="150"
class="toggle-img"
/>
<h3 class="blue toggle-text">Transformation</h3>
<a href="#" class="dropdown-trigger"
><span class="caret-dropdown"></span
></a>
</button>
</div>
<div class="contentWrapper">
<div class="content content-regular active" id="implementation">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">Info 1</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
list 1
</li>
<li>list 2</li>
<li>
list 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
<div class="content" id="advisory">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">info 2</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
list 1
</li>
<li>list 2</li>
<li>
list 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
<div class="content" id="integration">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">info 3</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
info 1
</li>
<li>
info 2
</li>
<li>
info 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
<div class="content" id="transformation">
<div class="pf-two-col-1">
<p class="deep-red wfn-caps bold pb-0 mb-0">info 4</p>
<h2 class="pt-0 mt-0">
information here
</h2>
<ul class="profservices">
<li>
list 1
</li>
<li>list 2</li>
<li>
list 3
</li>
</ul>
</div>
<div class="pf-two-col-2">
<img src="#" class="pf-img-col2" skiplazy="" />
</div>
</div>
</div>
</div>
</div>
</div>