JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="cont-chat">
    <div class="form">
        <form action="">
            <fieldset>
                <input type="text" />
                <input type="text" />
                <input type="text" />
                <input type="text" />
            </fieldset>
        </form>
    </div>
    <div class="chat">Establecer conversación</div>
</div>

CSS

.cont-chat{
    width:400px;
    display:block;
    margin:30px auto;
}
.form{
    background:#333;
    padding:10px;
    display:none;
}
.form input{
    background:#fff;
    border:none;
    width:100%;
    height:30px;
    margin-bottom:10px;
}
.chat{
    width:100%;
    text-align:center;
    color:#fff;
    background:#000;
    padding: 10px 0;
    cursor:pointer;
}
fieldset{
    border:none;    
}

JavaScript

$(function(){
    $('.chat').click(function(){
        if($(this).hasClass('activo')){
            $('.form').fadeOut(500);
            $(this).removeClass('activo')
        }else{
            $('.form').fadeIn(500);
            $(this).addClass('activo')
        }
    })
});

/* explicación codigo

le decimos que cuando le de click al div con clase "chat" primero busque si tiene la clase activo, esto lo hacemos para saber si el chat esta abierto o cerrado.

entonces si tiene la clase activo ocultamos el formulario de lo contrario lo mostramos */