I'm facing a problem on icon rotation. There are 4 `<a>` elements which have 4 icons with it. When click on any `<a>` element icon is rotate and box is display. After that when click on any other `<a>` element the last one box is collapse and rotation of last icon goes back to it's original position. But what's the problem is when i click `<a>` element and immediately click again to the same `<a>` element then icon doesn't rotate back to it's original position. 

```js
$icon = $('.icon');
$elem = $('.box');

    $('.link').click(function () {

        $elem.stop().slideUp();
        //reset icon states when box is collapse
        $icon.removeClass('rotateClass');
        //Rotate current icon
        $('.icon', this).toggleClass('rotateClass');
        $(this).next().stop().slideToggle();

    });
```

```css
 a:hover {
            cursor: pointer;
}

.icon {
            width: 17px;
            height: 17px;
            margin-left: 8px;
            transition: transform .25s ease-in;
}

.rotateClass {
            transform: rotate(-180deg);
}

.box {
            background-color: #FFF7E5;
            display: none;

}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div class="wrapper">

    <a class="link">
        <p>Link 1<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 1
    </div>

    <a class="link">
        <p>Link 2<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 2
    </div>

    <a class="link">
        <p>Link 3<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 3
    </div>

    <a class="link">
        <p>Link 4<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 4
    </div>

</div>
</body>
</html>
```