JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#building">Building</a></li>
        <li><a href="#audit">Audit</a></li>
    </ul>
    <div id="building">
        <div id="content">
            Hello I am the content
            <a href="#" id="edit">edit</a>
        </div>
        <div id="form">
            <input type="text">
            <a href="#" id="view">view</a>
        </div>
    </div>
    <div id="audit">
        Audit
    </div>
</div>

CSS

#form{
    
    display:none;
}

JavaScript

$(function() {
    $( "#tabs" ).tabs();
    
    $("#edit").click(function(){
        $("#content").fadeOut(function(){
            $("#form").fadeIn();
        });

    });
    
     $("#view").click(function(){
         $("#form").fadeOut(function(){
            $("#content").fadeIn();
         });

         
    });
});