JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="/assets/type.png" alt="Azure" /></td>
<td><a class="edit_credential" href="/information/26">My Info</a></td>
<td>Information for me</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="messagepop pop" id="cred_password">
<form method="post" id="new_message" action="/messages">
<p>
<label for="password">Encryption Password</label>
<input type="password" size="30" name="password" id="password" />
</p>
<p>
<input type="submit" value="Edit Credential" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a>
</p>
</form>
</div>
CSS
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
JavaScript
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.edit_credential').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('.edit_credential'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};