JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<a href="#" class="login" data-toggle="dropdown" data-target="#demo"><b>Main Link</b> <span class="caret"></span></a>
	<div id="demo" class="dropdown">
		<ul id="loginbtn" class="dropdown-menu">
			<li>
				<form>
					Login form
				</form>
				<a href="#" id="register">Register</a>	
			</li>
		</ul> 
		
		<ul id="signupbtn" class="dropdown-menu">
			<li>
				<form>
					Register form
				</form>
					
				<a href="#" id="login">Login</a>		
			</li>
		</ul>
	</div>

CSS

#signupbtn
{
  display:none;
}

JavaScript

$(document).ready(function(){
			$("#register").click(function(e){
				e.preventDefault();
				$('#loginbtn').hide(); 
				$('#signupbtn').show();
				return false;
			});
		});

		$(document).ready(function(){
			$("#login").click(function(e){
				e.preventDefault();
				$('#loginbtn').show(); 
				$('#signupbtn').hide();
				return false;
			});
		});