JSFiddle - React, Tailwind, and code Playground

by Kamlesh Gupta

HTML

<nav>
    <div id="expand">
        <div>
        <ul id="adminNavigation">
    <li value="userManagement">User Management</li>
            <li value="subjectManagement">Subject Management</li>
    <li value="testManagement">Test Management</li>
    <li value="preQuestion">Prepare Question</li>
    <li value="resultManagement">Result Management</li>   
 </ul>
       <div>
           <div>
      <a  id="arrNavLeft" href='#'><img src='http://s23.postimg.org/4pb4i6iyv/left_Arr.jpg' border='0' alt="left Arr" /></a>
                <a id="arrNavRight" href='#'><img src='http://s23.postimg.org/wxlp1b7uv/right_Arr.jpg' border='0' alt="right Arr" /></a>   </div> </div>

CSS

#expand{
    top:50%
    margin-top:-80px;
    z-index:1000; 
    }
#arrNavLeft{

    display:none;
}
ul li{
    display:block;
    background:#f64b39; 
    width:150px;
    white-space: nowrap;
    text-padding:1px;
    margin-top:1px;
    padding:5px;
     text-align: left;
    font-family:sans-serif,"Times New Roman", Times;
     font-size: 1em;
}
li:hover{
    cursor: pointer;
 background:#3F0;
}
#expand div {
 display:inline;
}
li:nth-child(3) {
   border-radius:0 10px 10px 0;
}

JavaScript

$(document).ready(function(){    
     $("#arrNavRight").on("click",function(e){
         e.preventDefault();
          $("#arrNavRight").css("display","none");
          $("#arrNavLeft").css("display","block");
     });
      $("#arrNavLeft").on("click",function(e){
         e.preventDefault();
          $("#arrNavLeft").css("display","none");
          $("#arrNavRight").css("display","block");
     });
     
     
 });