JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div id="msgStatusTitle">Unread</div>
		<div id="accordionsContainer">
			<div id='accordionsContainer2'>

				
				<div class="screenWrapper block1" data-messagetype="Actionable">
					<div class="badge actionable">
						1
					</div>
					<div class="rotate">
						Actionable
					</div>
				</div>
				<div class="screenWrapper block2" data-messagetype="All">

					<div class="badge messages-all">
						5
					</div>
					<div class="rotate">
						All Messages
					</div>
				</div>
				<div class="screenWrapper block3" data-messagetype="Archive">
					<div class="badge archive-blank">
						&nbsp;
					</div>
					<div class="rotate">
						Archive
					</div>
				</div>
				<div class="screenWrapper block4" data-messagetype="Unread" style="display: none;">
					<div class="badge unread">
						5
					</div>
					<div class="rotate">
						Unread
					</div>
				</div>

			</div>
		</div>

CSS

#accordionsContainer {
				width: 100%;
				height: 638px;
				min-height: 100px;
			}
			.rotate {
				padding-top: 2px;
				padding-left: 4px;
				/*overflow: hidden;*/
				position: relative;
				clear: both;
				-moz-transform: rotate(270deg);
				-moz-rotation-point: 0 0;
				-webkit-transform: rotate(270deg);
				-webkit-rotation-point: 0 0;
				-o-transform: rotate(270deg);
				-ms-transform: rotate(270deg);
				height: auto;
				width: auto;
				cursor: pointer;
				color: #997d71;
				font-weight: bold;
				white-space: nowrap;
			}
			.screenWrapper {
				float: left;
				width: 50px;
				height: 100%;
				border-top: #ebeae6 solid 0.1em;
				border-bottom: #ebeae6 solid 0.1em;
				border-right: #ebeae6 solid 0.1em;
				background-color: #fcfcfc;
				position: relative;
				margin-top: 100px;
			}
			.screenWrapper:after {
				display: block;
				content: " ";
				width: 18px;
				height: 8px;
				position: absolute;
				right: -19px;
				bottom: 0px;
			}
			.block1 {
				display: block;
				height: 616px;
				margin: 10px 0;
			}
			.block1 .rotate {
				/* margin-top:60px; */
			}
			.block2 {
				display: block;
				height: 596px;
				margin: 20px 0;
			}
			.block2 .rotate {
				/*margin-top:100px;*/
			}

			.block3 {
				display: block;
				height: 576px;
				margin: 30px 0;
			}
			.block3 .rotate {
				/*margin-top:40px;*/
			}
			.block4 {
				display: block;
				height: 556px;
				margin: 40px 0;
			}
			.block4 .rotate {
				/*margin-top:30px;*/
			}
			.badge {
				height: 35px;
				position: relative;
				top: 3px;
				width: 100%;
				padding-top: 9px;
				text-align: center;
				margin-bottom: 100px;
				color: #fff;
			}

			.badge.unread {

				
				margin-bottom: 89px;
			}
			.badge.actionable {
				
				margin-bottom: 128px;
			}
			.block1 .badge.actionable {
				margin-bottom: 112px;
			}
			.block2 .badge.actionable {
				margin-bottom: 100px;
			}
			.block2 .badge.events {
				margin-bottom: 77px;
			}
			.block2...

JavaScript

$( document ).on( "click",'div.screenWrapper',function(){
				   tgtSW = $(this); 
					var oldTitle = $('#msgStatusTitle').html();
					var msgTitle = tgtSW.attr('data-messageType');
					$('#msgStatusTitle').html(msgTitle);
			        tgtSW.animate({
			                  'width':0,	
			                  'opacity': 0
			               }, 750, function() {
					   
					  selIndex = parseInt(tgtSW.attr('class').match(/\d+/)) ;
						tgtSW.attr('class','screenWrapper block4');
						tgtSW.css({'opacity':1,'width':50,'display':'none'});
						$("#accordionsContainer2").find(tgtSW).appendTo("#accordionsContainer2");
                   		tgtSW.hide();
                   		$("div.screenWrapper[data-messagetype='" + oldTitle + "']").show();
				   		$('.screenWrapper:visible').each(function(i, obj) {
							obj = $(obj);
							blockIndex = parseInt(obj.attr('class').match(/\d+/));
							blockIndex = selIndex<blockIndex ? parseInt(blockIndex-1) : blockIndex;
							console.log(selIndex,blockIndex)
							obj.attr('class', 'screenWrapper block' + blockIndex);
						});
					});
});