Plus to minus icon CSS / JS

Rotate plus icon to minus using CSS and Jquery.

by Vishnuprasad ps

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="icon-plus closed">
  <div class="icon">
    <div class="horizontal"></div>
    <div class="vertical"></div>
  </div>
</div>

CSS

.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
  opacity: 1;
}

.opened {
  opacity: 1;
}

.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
  opacity: 0;
}

.icon-plus {
  font-size: 1em;
  opacity: .7;
}

.icon-plus .icon {
  position: relative;
  width: 50px;
  height: 50px;
  background: #eee;
  cursor: pointer;
}

.icon-plus .icon .horizontal {
  position: absolute;
  background-color: #333;
  width: 20px;
  height: 2px;
  left: 50%;
  margin-left: -11px;
  top: 50%;
  margin-top: -1.5px;
}

.icon-plus .icon .vertical {
  position: absolute;
  background-color: #333;
  width: 2px;
  height: 20px;
  left: 50%;
  margin-left: -2.5px;
  top: 50%;
  margin-top: -10px;
}

JavaScript

$('.icon-plus').on('click', function() {
  $(this).toggleClass('opened');
})