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?

enter image description here

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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -