JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="accordion">
    <h3>
        <div class="dotted">Создать нового пользователя
        </div>
    </h3>
    <p>
        <form method="post" action="/~newusermake">
            <input placeholder="Новый Никнейм" name="name">
            <input placeholder="Новый Пароль" name="text">
            <input type="submit" value="Создать">
        </form>
    </p>
</div>
<div class="accordion">
    <h3>
        <div class="dotted">тест
        </div>
    </h3>
    <p>тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест тест </p>
</div>

CSS

.accordion {
    width: 100%;
}

.accordion p {
    display: none;
    padding:20px 10px;
    border-left:1px dotted #cdcdcd;
    border-right:1px dotted #cdcdcd;
    border-bottom:1px dotted #cdcdcd;
}
.dotted {
    padding: 0.6em 1.6875em;
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    -webkit-background-size: 3px 3px;
    -moz-background-size: 3px 3px;
    background-size: 3px 3px;
    cursor:pointer;
}

.dotted:hover{
    padding: 0.6em 1.6875em;
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0,0,0,.5), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    -webkit-background-size: 3px 3px;
    -moz-background-size: 3px 3px;
    background-size: 3px 3px;
    margin:0px;
}

JavaScript

$(document).ready(function(){
    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();
 
    $(".accordion h3").click(function(){
 
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
     });
  
 });