JSFiddle - React, Tailwind, and code Playground

by ajoo

HTML

<title>Doruem Online System</title>


    <link rel="stylesheet" type="text/css" media="screen" href="slide1.css"  />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript" src="slide1.js" ></script>
	
<body>

<!-- Panel -->
	<div id="toppanel">
        <div id="panel">
                <div class="content clearfix">
                        <div class="left">
                                <h1><i>TOP LEFT</i></h1>
                                <h2> Welcome User</h2>

                                <h3 class="grey">The first para in the header</h3>
								<p> Just for fun. </p>
								<h3> and this is the second !</h3>
                                <h2>Thank you very much.</h2>
                        </div>

						<div class="left">
								<!-- Login Form -->
								<form class="clearfix" action="" method="post">
										<h1>Member Login</h1>
										<h2> Display the Login form here </h2>	

								</form>
								
						</div>
		<!-- ================================================================================================================= -->
						<div class="left right">
						
							<h1>TOP RIGHT</h1>
							<p> This is an area on the right. </p> 
						
						</div>
		<!-- ================================================================================================ -->

				</div>
		</div> <!-- /login -->

		
    <!-- The tab on top -->
        <div class="tab">
                <ul class="login">
                    <li class="left">&nbsp;</li>
					<li>Hello Guest!</li>
                        <li class="sep">|</li>
                        <li id="toggle">
                                <a id="open" class="open" href="#"> Log In | Register</a>
								<!-- to rectify the slide flaw insert style="display:none"; just before class="close" and search and remove /* FLAW */ block from css -->
                                <a id="close"...

CSS

/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0

        The CSS, XHTML and design is released under Creative Common License 3.0:
        http://creativecommons.org/licenses/by-sa/3.0/
*/ 


/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */

.tab {
        background: url(http://imgur.com/S7VnXaB.png) repeat-x 0 0;
        height: 42px;
        position: relative;
        top: 0;
        z-index: 999;
}

.tab ul.login {
        display: block;
        position: relative;
          float: right;
          clear: right;
          height: 42px;
          width: auto;
          font-weight: bold;
          line-height: 42px;
          margin: 0;
          right: 150px;
          color: white;
          font-size: 12px;
          text-align: center;
}

.tab ul.login li.left {
          background: url(http://imgur.com/LGq63mo.png) no-repeat left 0;
          height: 42px;
          width: 30px;
          padding: 0;
          margin: 0;
          display: block;
          float: left;
}

.tab ul.login li.right {
          background: url(http://imgur.com/9g5Y2Ax.png) no-repeat left 0;
          height: 42px;
          width: 30px;
          padding: 0;
          margin: 0;
          display: block;
          float: left;
}

.tab ul.login li {
          text-align: left;
          padding: 0 6px;
          display: block;
          float: left;
          height: 42px;
          background: url(http://imgur.com/7z0p74M.png) repeat-x 0 0;
}

.tab...

JavaScript

$(document).ready(function() {
	
	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");
	
	});	
	
	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
	});		
	
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
		var state = $('#close').css('display');
	//	alert(state);
		if(state === 'none') $('#close').css('display','block');
		if(state === 'block') $('#close').css('display','none');
		
	});		
		
});