<div class="icon">
<span></span>
<span></span>
</div>
.icon {
display: flex;
justify-content: center;
cursor: pointer;
}
.icon span{
display: block;
background-color: #000;
}
.icon span:first-child{
width: 4px;
height: 40px;
}
.icon span:last-child{
position: relative;
top: 18px;
right: 22px;
width: 40px;
height: 4px;
}
.icon.active{
padding-left: 4px;
}
.icon.active span:first-child{
display: none;
}
$('.icon').click(function() {
$(this).toggleClass('active');
})
This Pen doesn't use any external CSS resources.