toggle icon

by Digvijay Naruka

HTML

<div id="drop" ></div>

CSS

#drop{
  position:relative;
}
#drop::before,#drop::after{
  content: '';
  width: 14px;
  position: absolute;
  height: 4px;
  left:0px;
  top:0px;
  background: #000;
    -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
    -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

#drop::before{
  -webkit-transform: rotate(0deg);
  transorm: rotate(0deg);
  opacity: 0;
}

#drop.collapse::before{
    -webkit-transform: rotate(-90deg);
  transorm: rotate(-90deg);
  opacity: 1;
}
#drop.collapse::after{
    -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  
}

JavaScript

$(document).ready(function(){
	$('#drop').click(function(){
		$(this).toggleClass('collapse');
    
	});
});