Question: I have this example of Collapse row on mouse click:

```
jsfiddle.net/7bz5au97/

```

I would like to ask you how I can add arrow like this one at the beginning of the question and rotate it when the question is expanded?

![enter image description here](https://i.stack.imgur.com/nKYFI.png)

Can this be done with CSS only or I need also to add JavaScript?

Answer: 
You could do this almost entirely with css:

```js
var arr = document.querySelector('.arrow');
arr.addEventListener('click', function(event) {
  event.target.classList.toggle('down');
});
```

```css
.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;
}
```

```html
<div class="arrow"></div>
```
For future reference, here's a version of it that doesn't require javascript: <http://jsfiddle.net/6xnptkLg/>

```css
.single-row input[type="radio"] {
    display: none;
}

.intro {
    display. block;
}

.intro .fa {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: -webkit-transform 250ms ease-in-out;
    -moz-transition: -moz-transform 250ms ease-in-out;
    -o-transition: -o-transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;
}

.content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 250ms ease-in-out;
    -moz-transition: max-height 250ms ease-in-out;
    -o-transition: max-height 250ms ease-in-out;
    transition: max-height 250ms ease-in-out;
}

.opener:checked+label .content {
    display: block;
    max-height: 100px;
}

.opener:checked+label .intro .fa {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}
```

```html
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="single-row">
    <input name="collapsable" type="radio" id="col-1" class="opener" />
    <label for="col-1">
        <span class="intro">Intro1<i class="fa fa-sort-desc"></i></span>
        <div class="content">
            <p>
                Some text down here
            </p>
        </div>
    </label>    
</div>

<div class="single-row">
    <input name="collapsable" type="radio" id="col-2" class="opener" />
    <label for="col-2">
        <span class="intro">Intro2<i class="fa fa-sort-desc"></i></span>
        <div class="content">
            <p>
                Some text down here
            </p>
        </div>
    </label>
</div>

<div class="single-row">
    <input name="collapsable" type="radio" id="col-3" class="opener" />
    <label for="col-3">
        <span class="intro">Intro3<i class="fa fa-sort-desc"></i></span>
        <div class="content">
            <p>
                Some text down here
            </p>
        </div>
    </label>
</div>
```