JSFiddle - React, Tailwind, and code Playground

by fachhoch

HTML

<body>
		<div  id="search">	
			<div style="height:50em;  width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
				
				Place hodler for search form........
			</div>
		
		<div style="border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
			<label  style=" font-weight: bold;" >Search Results </label>	
			<table  id="searchResults">
				
				<thead>
					<td>column1</td>
					<td>column2</td>
					<td>Action</td>
				</thead		
				<tbody>	
					<tr>
						<td>
							Some value...
						</td>
						<td>
							Some value...
						</td>
						<td>
							<a href="#"  onclick="showDetails();">Show Details</a>
						</td>
					</tr>
					<tr>
						<td>
							Some value...
						</td>
						<td>
							Some value...
						</td>
						<td>
							<a href="#"  onclick="showDetails();">Show Details</a>
						</td>
					</tr>
					<tr>
						<td>
							Some value...
						</td>
						<td>
							Some value...
						</td>
						<td>
							<a href="#"  onclick="showDetails();">Show Details</a>
						</td>
					</tr>
					<tr>
						<td>
							Some value...
						</td>
						<td>
							Some value...
						</td>
						<td>
							<a href="#"  onclick="showDetails();">Show Details</a>
						</td>
					</tr>
					<tr>
						<td>
							Some value...
						</td>
						<td>
							Some value...
						</td>
						<td>
							<a href="#"  onclick="showDetails();">Show Details</a>
						</td>
					</tr>
					<tr>
						<td>
							Some value...
						</td>
						<td>
							Some value...
						</td>
						<td>
							<a href="#"  onclick="showDetails();">Show Details</a>
						</td>
					</tr>
					<tr>
						<td>
							Some value...
						</td>
						<td>
							Some value...
						</td>
						<td>
							<a href="#"  onclick="showDetails();">Show Details</a>
						</td>
					</tr>
					<tr>
						<td>
							Some...

JavaScript

window.showDetails=function (){
    $('#search').toggle();
    $('#detailsFragment').css("display","block");
}
window.hideDetails=function(){
    $('#search').toggle();
    $('#detailsFragment').css("display","none");
    $('#searchResults').focus();
}