JSFiddle - React, Tailwind, and code Playground

by gansai

HTML

<div class="left_menu">

               <div class="wings">
 		        <div style="float:left;"><img src="images/right_arrow.gif"/></div>
		        <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Reports</a></div>
			    <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div>
               </div>

			   <div class="box">
				Reports content.....
			   </div>

			   <div class="wings">
 		        <div style="float:left;"><img src="images/right_arrow.gif"/></div>
		        <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Roles</a></div>
			    <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div>
               </div>

			   <div class="box">
			     Roles content....
			   </div>
		   
            </div> <!--left_menu-->

            <div class="right_menu">
	           <ul id="tabs">
                  <li><a id="tab1">Configuration</a></li>	  
                  <li><a id="tab2">Report Viewer</a></li>
               </ul>

	           <div class="container" id="tab1C">
 			      <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br>
				     ( Report Tab content )				  
				  </div>
			   </div>
			   
			   <div class="container" id="tab2C">
 			      <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br>
				     ( Report Tab content )				  
				  </div>
			   </div>                 
	    </div><!--right_menu-->

CSS

.wings { width:200px; float:left; padding:7px 11px; }
      .box { width:195px; float:left; display:none; margin:0px 20px; }

JavaScript

//accordion left menu
	   $ (document).ready(function()
       {
 	      $ (".wings").click(function(event)
	      {
	 	     $(".box").slideUp("slow");
		     if ($(this).next().is(":hidden") == true)
		     {
			    $(this).next().slideDown("slow");
		     }
	      });
	      //(".box").hide("slow");
       });

	   //Tab (rightbox)
	   $(document).ready(function() 
	   {    
         $('#tabs li a:not(:first)').addClass('inactive');
         $('.contain').hide();
	     $('.contain:first').show();
      
	     $('#tabs li a').click(function()
	     {
            var t = $(this).attr('id');
		    if($(this).hasClass('inactive'))
		    { //this is the start of our condition 
              $('#tabs li a').addClass('inactive');         
		      $(this).removeClass('inactive');
              $('.contain').hide();
              $('#'+ t + 'C').fadeIn('slow');
            }
         });
       });