I am attempting to create a dropdown and rise-up banner without relying on jQuery. My goal is for it to smoothly descend and rise when the triangle is pressed, as shown in the image. Currently, the triangle is styled as text (though it could also be a button).
The issue at hand is how to alter the behavior of an element (triangle) after it has been clicked multiple times. Upon the first click, the banner should drop down and then the triangle needs to change direction to point upwards, while 'Show' becomes 'Hide'. Subsequent clicks should cause the banner to rise up again, with the triangle pointing downwards.
For clarity, here is an image: https://i.sstatic.net/XYW5m.png
Following advice from muka.gergely, I have simplified the example for myself:
HTML:
<div class="dropdown-wrapper">
<div class="btn-dropdown">
Show ▼
<div class="dropdown-content-container">
<!--Banner-->
</div>
</div>
</div>
JavaScript:
<script>
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
/* Changing the name of the 'Banner' is not working */
/* const initialText = "Banner"
/*if (btn.textContent.toLowerCase().includes(initialText.toLowerCase())) {
btn.textContent = 'Hide a Banner';
} else {
btn.textContent = initialText;
}
*/
e.target.classList.toggle('open');
});
})
</script>
CSS:
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 1.50s;
}
.btn-dropdown.open>.dropdown-content-container {
height: 500px;
max-height: 500px;
transition: all 1.50s;
}