JSFiddle - React, Tailwind, and code Playground

by qwertylist

HTML

<script src="http://amatol.ucoz.com/cookie.js"></script>  

 <ul class="navigation" >
 <li class="inset_header1 " id="inset_header1" onClick="click_header_inset(1);"><a href="#"><div class="icon"><i class="fa fa-home"></i></div>пункт 1</a></li>
 <li class="inset_header2 " id="inset_header2" onClick="click_header_inset(2);"><a href="#"><div class="icon"><i class="fa fa-pencil"></i></div>пункт 2</a></li> 
 <li class="inset_header3 " id="inset_header3" onClick="click_header_inset(3);"><a href="#"><div class="icon"><i class="fa fa-picture-o"></i></div>пункт 3</a></li>
 <li class="inset_header4 " id="inset_header4" onClick="click_header_inset(4);"><a href="#"><div class="icon"><i class="fa fa-user"></i></div>пункт 4</a></li> 
 <li class="inset_header5 " id="inset_header5" onClick="click_header_inset(5);"><a href="#"><div class="icon"><i class="fa fa-envelope-o"></i></div>пункт 5</a></li>
 </ul>

<div class="block_inset">

 <div class="inset_num" id="inset_num1">
 <div class="inset_content">
 <h2>Блок пункта 1</h2>     
 </div>
 </div>
 <div class="inset_num" id="inset_num2">
 <div class="inset_content">
 <h2>Блок пункта 2</h2> 
 </div> 
 </div>
 <div class="inset_num" id="inset_num3">
 <div class="inset_content">
 <h2>Блок пункта 3</h2>
 </div>
 </div>


 <div class="inset_num" id="inset_num4">
 <div class="inset_content">
 <h2>Блок пункта 4</h2>
 </div>
 </div> 
 <div class="inset_num" id="inset_num5">
 <div class="inset_content">
 <h2>Блок пункта 5</h2>
 </div>
 </div>  
    
<div class="reltr" id="inse_num">A</div>
   
 </div>

CSS

.block_inset { 
 position:absolute;
 top:0px;
 bottom:0px; 
 left:113px;
 width:340px; 
 height:110%;
 overflow-x:hidden; 
 }

.inset_content { 
 position:relative;
 margin:0px; 
 padding:0px;
 width:100%; 
 height:100%;
 color:#fff;   
 background-color: rgba(0, 0, 0, 0.8); 
 overflow-y:auto;
}
.inset_num { 
 position:absolute; 
 top:0px;
 bottom:0px; 
 width:300px; 
 height:100%;
 left:-300px;
 z-index:3; 
}
.reltr{
 z-index:2;
 left:0px;   
 width: 40px;
 height: 100%; 
 position: absolute;
 background:#b5b5b5;
 top:0; 
}

JavaScript

num_inset_motor=0;
flag_inset_motor=0;
time_pause_motor=1;
delta_x=10;
set_motor=false;
id_settimeout=0;
open_inset_num=0;
next_open_num=0;
width_header=0;
restoreState ('1'); setState ('1');
restoreState ('2'); setState ('2');
restoreState ('3'); setState ('3');
restoreState ('4'); setState ('4');
restoreState ('5'); setState ('5');

function setState (blockName) {
				$('#inset_header'+blockName).click(function() {
					var blockStateCookie = $.cookie('blockState');
					if (blockStateCookie == null) var blockState = [1, 1, 1, 1, 1];
					else var blockState = blockStateCookie.split('');
					var arrEl = blockName-1;
					if ($(this).parent().is('.hide')) blockState [arrEl] = 1;
					else blockState [arrEl] = 0;
					var blockStateCookie = blockState.join('');
					$.cookie('blockState', blockStateCookie, { expires: 10000, path: '/' });
				});
			};
			function restoreState (blockName) {
				var arrEl = blockName-1,
					blockStateCookie = $.cookie('blockState');
				if (blockStateCookie != null) {
					blockState = blockStateCookie.split('');
					if (blockState [arrEl] == 0) { 
						$('#inset_header'+blockName).addClass('hide');
					}
				
				}
			};
            


function click_header_inset(n_inset)
  {
   
   if (!set_motor)
     {
      next_open_num=0;
      if (open_inset_num==0)
        { 
         num_inset_motor=n_inset;
         flag_inset_motor=1;
         set_motor=true;
         motor_inset();
        }
       else
         {
          if (n_inset!=open_inset_num) next_open_num=n_inset;
          num_inset_motor=open_inset_num;
          flag_inset_motor=-1;
          set_motor=true;
          motor_inset();
          
         }
     }
    else
      {
       clearTimeout(id_settimeout);
       if (n_inset==num_inset_motor)
         {
          flag_inset_motor*=-1;
          motor_inset();
         }
        else
          {
           next_open_num=n_inset;
           if (flag_inset_motor>0)
             {
             ...