javascript - Collapse arrow on mouse click -
i have example of collapse row on mouse click:
jsfiddle.net/7bz5au97/
i ask how can add arrow 1 @ beginning of question , rotate when question expanded?
can done css or need add javascript?
you entirely css:
var arr = document.queryselector('.arrow'); arr.addeventlistener('click', function(event) { event.target.classlist.toggle('down'); });
.arrow { margin: 1em; } .arrow::before { position: absolute; content: ''; width: 0; height: 0; border: .5em solid transparent; border-left-color: gray; transform-origin: 0 50%; transition: transform .25s; } .arrow.down::before { transform: rotate(90deg); transition: transform .25s; }
<div class="arrow"></div>
Comments
Post a Comment