JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

<div id="popout" class="hidden">
    <div id="trigger"><span>Show</span></div>
    <ul>
        <li> <a href="">
            <img src="http://www.thomascsherman.com/images/so/facebook.png" /></a>

        </li>
        <li> <a href="">
            <img src="http://www.thomascsherman.com/images/so/twitter.png" /></a>

        </li>
        <li> <a href="">
            <img src="http://www.thomascsherman.com/images/so/instagram.png" /></a>

        </li>
        <li> <a href="">
            <img src="http://www.thomascsherman.com/images/so/youtube.png" /></a>

        </li>
    </ul>
</div>

CSS

/* minimal CSS */
 #popout {
    position: fixed;                /* fix the popout to the left side of the screen */
    top: 50px;
    left: -40px;                    /* use a negative margin to pull the icon area of the popout off the edge of the page */
    width: 75px;
    border: 1px dotted gray;
    color: gray;
}
#trigger {                          /* create a clickable area that triggers the slide in/out effect */
    position: absolute;             /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */  
    top: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;   
}
img {
    height: 40px;
}
/* Some additional CSS to look nice */ 
#trigger span {                      /* rotate the 'show' text 90 degrees. If you are using an incon you won't need this bit */
    display: inline-block;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
#popout {                             /* made my popout narrow because vertical text needs less width */
    width: 70px;
    box-shadow: 3px 3px 2px #888;
}
#trigger {                            /* shift text down to center it */
    padding-top: 67px;
}

JavaScript

//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        left: 0
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        left: -40
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}