JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<a href="#" id="slick-show">Show Something</a>
<div class="clear"></div>
<div id="slickbox">

    <div class="span6">
        <form action="/change-password" method="post">                <div>
                    <fieldset>
                        <legend></legend>
                        <div style="padding-left: 15px; padding-top:10px;">
                            <div class="editor-label">
                                <label for="OldPassword">Current password</label>
                            </div>
                            <div class="editor-field">
                                <input class="text" data-val="true" data-val-required="Please Enter Current Password" id="OldPassword" maxlength="50" name="OldPassword" type="password">
                                <span class="field-validation-valid errorMsg" data-valmsg-for="OldPassword" data-valmsg-replace="true"></span>
                            </div>
                            <div class="editor-label" style="margin-top: 12px;">
                                <label for="NewPassword">New password</label>
                            </div>
                            <div class="editor-field">
                                <input class="text" data-val="true" data-val-length="New password must be at least 6 characters long." data-val-length-min="6" data-val-required="Please Enter New Password" id="NewPassword" maxlength="50" name="NewPassword" type="password">
                                <span class="field-validation-valid errorMsg" data-valmsg-for="NewPassword" data-valmsg-replace="true"></span><br>
                                

                                

                                <span class="form-field-desc"><label for="">(Password must be at least 6 characters long)</label></span>

                                

                            </div>
                            <div class="editor-label" style="margin-top: 12px;">
                                <label...

CSS

#slick-show {
    float: right;
}
.clear {
    clear: both;
    display: block;
}

JavaScript

// shows the slickbox DIV on clicking the link with an ID of "slick-show"
$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').hide(); 
 // toggles the slickbox on clicking the noted link  
  $('#slick-show').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
});