JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<div class='toggle' data-item='1'>navs</div>
<div class="portholder" id="item1">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>
<div class='toggle' data-item='2'>navs</div>
<div class="portholder" id="item2">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>
<div class='toggle' data-item='3'>navs</div>
<div class="portholder" id="item3">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>
<div class='toggle' data-item='4'>navs</div>
<div class="portholder" id="item4">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>
<div class='toggle' data-item='4'>navs</div>
<div class="portholder" id="item4">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>
<div class='toggle' data-item='5'>navs</div>
<div class="portholder" id="item5">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>
<div class='toggle' data-item='6'>navs</div>
<div class="portholder" id="item6">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>
<div class='toggle' data-item='7'>navs</div>
<div class="portholder" id="item7">
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>
    <p>sdfsadfadf</p>    
</div>

<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>
<p>sdfsadfadf</p>

CSS

html, body {
  	height: 100%;
  	width: 100%;
  	padding: 0;
  	margin: 0;
    font-size: 1em;
    line-height: 1.4;
    color:#fff;
 	background:black;
}

 

.toggle {
	width:90%;
	height:30px;
	left:0;
	right:0;
	margin-left: auto;
    margin-right: auto;
    color:#fff;
	border:solid;
	border-width:thin;
	border-color:#fff;
	text-align:left;
	padding-left:2em;
	background-image: url('empty.gif');
	-webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.toggle:hover {
	color:#FC0;
	width:91%;
}

.portholder {
	display:none;
    color:#fff;
	width:90%;
	left:0;
	right:0;
	margin-left: auto;
    margin-right: auto;
	border:solid;
	border-width:thin;
	border-color:#fff;
}

JavaScript

var itemShowing;
	$('.toggle').click(function(){
	
		var itemNum = $(this).data('item');
		var portItem = "#item"+itemNum;
		var $portSelector = $(portItem);
		
		if($portSelector.css('display')==='none'){
			$portSelector.css('display','block');
			if(itemShowing != portItem){
				$(itemShowing).css('display','none');
			}
		}
		else
		{
			$portSelector.css('display','none');
		}
		itemShowing = portItem;
        offset = $portSelector.offset();
        var w = $(window);
        var scrollY = offset.top-w.scrollTop()-$(this).height();
		window.scrollTo(0,scrollY);
	});