JSFiddle - React, Tailwind, and code Playground

by JuanMa

HTML

<div class="contenedor">
    <button class="boton" type="button"></button>
    <div class="cortina">
        <p>Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco Contenido marco</p>
    </div>
</div>

CSS

.contenedor {
    position:relative;
    width: 300px;
    display:block;
    margin: 10px auto;
}
.boton {
    position:absolute;
    left:43%;
    bottom:-28px;
}
.boton:before {
    content:"Mostrar";
}
.active:before {
    content:"Ocultar";
}
.cortina {
    position:relative;
    background:#eee;
    margin:0;
    margin-bottom:25px;
    border:1px solid #666;
    border-radius:10px;
    text-align:justify;
    padding: 8px;
}
.cortina p {
    margin:0;
}

JavaScript

$(document).ready(function () {
    $(".cortina").hide();
    $("button.boton").click(function () {
        $(this).toggleClass("active").next().slideToggle("slow");
        return false;
    });
});