JSFiddle - React, Tailwind, and code Playground

by TimGThomas

HTML

<div id="form">
    <div class="view">
        <p>
            <label>Name</label>
            <span>Jennifer Smith</span>
        </p>
        <a class="toggle" href="#">Edit</a>
    </div>
    <div class="edit">
        <p>
            <label>Name</label>
            <input value="Jennifer Smith">
        </p>
        <button disabled="disabled">Save</button>
        <a class="toggle" href="#">Cancel</a>
    </div>
</div>

CSS

/* State Styles */
.view { display: block; }
.edit { display: none; }

.editing .view { display: none; }
.editing .edit { display: block; }

/* Generic Styles */
* { margin: 0; padding: 0; }
label, span, input, button, a { font: 14px Verdana; }
button { cursor: not-allowed; padding: 4px 12px; }
p { margin-bottom: 10px; }
label { display: block; font-weight: bold; }
span, input { border: 1px solid #999; display: block; padding: 4px; width: 150px; }
span { background: #eee; color: #999; }

JavaScript

var $form = $('#form');

$(function() {
    $form.on('click', '.toggle', function(e) {
        e.preventDefault();
        $form.toggleClass('editing');
    });
});