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>
```
You can do a simple triangle using CSS but it gets complicated if you want rounded corners like in your image.

More fancy CSS shapes [here](https://css-tricks.com/examples/ShapesOfCSS/).

```js
$(function () {
    $('span').click (function () {
        $(this).toggleClass ('expanded');
        $('p').toggleClass ('expanded');
    });
});
```

```css
p:not(.expanded) {
    display:none;
}

span {
    display:block;
    width:0;
    height:0;
    cursor:pointer;

    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:20px solid black;
}

span.expanded {
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:20px solid black;
}
```

```html
<script src = "http://code.jquery.com/jquery-2.1.4.min.js"></script>
<span></span>
<p>Hello</p>
```