When using the after and before selectors, I am attempting to change the dropdown icon depending on whether it is open or closed. However, I have not been successful so far. As someone who is relatively new to this, I would appreciate any help in achieving this result.
I'm not completely sure if this is the correct approach.
Edit: Thanks to AStombaugh's answer, I managed to make some progress but I'm unsure if I'm doing it correctly. Can anyone provide guidance on whether my implementation is right or wrong? Apologies for my lack of experience, I am trying to grasp all aspects of JavaScript.
New code snippet:
var dropdownBtn = document.querySelectorAll('.drop_btn');
iconDrop = null;
lastOpened = null; //Include this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
let icon = this.querySelector('.icon_item');
icon.classList.toggle("visible");
dropCont.classList.toggle("show");
//Include this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
if (iconDrop && iconDrop !== icon)
iconDrop.classList.remove("visible");
iconDrop = icon;
}));.drop_btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.icon_item:after {
font-family: fontAwesome;
content: '\f078';
float: right;
}
.icon_item.visible:after {
font-family: fontAwesome;
content: '\f00d';
}
.drop_btn:hover {
background: #000;
color: #fff;
}
.drop_container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.drop_container.show {
max-height: 300px;
transition: max-height 0.3s ease-in;
}
.drop_container>.item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="dropdown-menu">
<div class="drop_btn">One<span class="icon_item"></span></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="drop_btn">Two<span class="icon_item"></span></div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>Original code snippet:
var dropdownBtn = document.querySelectorAll('.drop_btn');
lastOpened = null; //Include this for toggling dropdown
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var dropCont = this.nextElementSibling;
dropCont.classList.toggle("show");
//Include this for toggling dropdown
if (lastOpened && lastOpened !== dropCont)
lastOpened.classList.remove("show");
lastOpened = dropCont;
}));.drop_btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.drop_btn:before {
font-family: fontAwesome;
content: '\f077';
float: right;
}
.drop_btn:after {
font-family: fontAwesome;
content: '\f078';
float: right;
}
.drop_btn:hover {
background: #000;
color: #fff;
}
.drop_container {
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.drop_container.show {
max-height: 300px;
transition: max-height 0.3s ease-in;
}
.drop_container > .item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="dropdown-menu">
<div class="drop_btn">One</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="drop_btn">Two</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>