I have JavaScript to show/hide div on click. Inside that div are more buttons to show/hide PNGs.
I want the clicked button to have a bottom border line until another button in that div is clicked.
I have achieved this but each time I click on a button in the shown div the bottom border line stays on the button when I click the next button.
I’ve spent hours trying to fix this. please help
let wildCard = document.querySelectorAll(".element-select-container button"); for (let button of wildCard) { button.addEventListener('click', (e) => { const et = e.target; const active = document.querySelector(".active"); let redline = (".redline"); if (active) { active.classList.remove("redline"); active.classList.remove("active"); } et.classList.add("active"); et.classList.add("redline"); let allContent = document.querySelectorAll('.button-wrapper'); for (let content of allContent) { if(content.getAttribute('data-e') === button.getAttribute('data-e')) { content.style.display = "block"; } else { content.style.display = "none"; } } }); }
HTML
<div class="element-select-container"> <button id="but81" class="but81 redline" data-e="81" type="button" name="">Doors</button> <button id="but82" class="but82" data-e="82" type="button" name="">Windows</button> <button id="but83" class="but83" data-e="83" type="button" name="">Facia</button> <button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button> <button id="but85" class="but85" data-e="85" type="button" name="">Garage</button> <button id="but86" class="but86" data-e="86" type="button" name="">Steps</button> </div>
CSS
.redline { border-bottom: 2px solid red; }
Advertisement
Answer
The issue is, on first load, the first button is redline
but not active
– so, when you press a different button, the code to remove redline
from active
doesn’t find active
so redline
isn’t removed
simple fix
const active = document.querySelector(".active,.redline");
As follows
let wildCard = document.querySelectorAll(".element-select-container button"); for (let button of wildCard) { button.addEventListener('click', (e) => { const et = e.target; const active = document.querySelector(".active,.redline"); if (active) { active.classList.remove("redline"); active.classList.remove("active"); } et.classList.add("active"); et.classList.add("redline"); let allContent = document.querySelectorAll('.button-wrapper'); for (let content of allContent) { if(content.getAttribute('data-e') === button.getAttribute('data-e')) { content.style.display = "block"; } else { content.style.display = "none"; } } }); }
.redline { border-bottom: 2px solid red; }
<div class="element-select-container"> <button id="but81" class="but81 redline" data-e="81" type="button" name="">Doors</button> <button id="but82" class="but82" data-e="82" type="button" name="">Windows</button> <button id="but83" class="but83" data-e="83" type="button" name="">Facia</button> <button id="but84" class="but84" data-e="84" type="button" name="">Guttering</button> <button id="but85" class="but85" data-e="85" type="button" name="">Garage</button> <button id="but86" class="but86" data-e="86" type="button" name="">Steps</button> </div>