$div = document.querySelector('.wrapper'); $div.addEventListener('click', (event) => { [...$div.children].forEach(element => { element.classList.toggle('active'); }) });
<div class="wrapper"> <div class="box left"></div> <div class="box right"></div> </div>
body { background-color: #333; } .wrapper { display: flex; justify-content: space-between; align-items: center; width: 32px; height: 32px; margin: 32px; } .box { width: 0; height: 24px; transition: 0.2s all; border-left: 8px solid white; border-top: 0 solid transparent; border-bottom: 0 solid transparent; } .box.active { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid white; } .left { margin-left: 6px; } .right { margin-right: 6px; } .right.active { height: 0; } .left.active { height: 12px; }