JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<div id="pnlThematicParent">
            <div id="pnlThematic">
                <a id="hideshow"></a>
                <h3>Section 1</h3>
                <div>
                    <p>
						Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
						ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
						amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
						odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                    </p>
                </div>                             
            </div>
        </div>

CSS

#hideshow {
	  background-color: #F0F8FF;
	  background-image: url("https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg");
	  background-size: cover;
	  border-radius: 100px 0 10px 100px;
	  box-shadow: 2px 2px 2px #888888;
	  cursor: pointer;
	  height: 40px;
	  left: -20px;
	  opacity: 0.7;
	  padding: 2px 4px;
	  position: absolute;
	  transition: opacity 0.5s ease 0s;
	  width: 10px;
	}

	#pnlThematic {
	  border: medium dotted;
	  height: 100%;
	  left: 0;
	  position: relative;
	  top: 0;
	  width: 100%;
	}
	#pnlThematicParent {
	  height: 300px;
	  position: fixed;
	  right: 0;
	  width: 150px;
	}

JavaScript

var wWidth = $(document).width();

$('#pnlThematic').css({marginLeft:  -(parseFloat($('#pnlThematic').css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()});

var elementWidth = $("#hideshow").width();

$("a").on("click", function (ev) {
    var isVisible = $(ev.target).parent().is(":visible");
    $(ev.target).parent().animate({
			marginLeft: -(parseFloat($(ev.target).parent().css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()
		});
	});