Question

I have a div that expands on hover via CSS. I want it to stay at that width when the user click on the div. So far I have this working.

However I need the div to collapse back to original size when the user clicks the div again (toggle) and if the user clicks off the div on the rest of the document.

Fiddle is here

jQuery here:

$(".rail").click(function() {
    $(".rail").width( 180 );
});

CSS here:

.rail{
   width: 30px;
   border-left: 10px solid #ff5400;
   position: absolute;
   top: 0px;
   bottom: 0px;
   right: 0px;
   background-color: rgba(0,0,0,0.15);
   cursor: pointer;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
 }
.rail:hover{
   width: 180px;
   background-color: #ddd;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

Answer 1

$(".rail").on({
    mouseenter: function() {
        $(this).addClass('hover');
    },
    mouseleave: function() {
        $(this).removeClass('hover');
    },
    click: function() {
        $(this).toggleClass('active');
    }
});

$(document).on('click', function(e) {
    if (!$(e.target).is('.rail') && $('.rail').is('.active')) $('.rail').removeClass('active');
});

FIDDLE