JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<h1> 4 виджета в одном </h1>
<section>
            <h2>Спойлер</h2>
            <dl class="spat spoiler">
                <dt class="read_more">Кнопка</dt>
                <dd class="hidden spoiler-body">
                    Тело окна
                </dd>
            </dl> 
    <dl class="spat spoiler">
                <dt class="read_more">Кнопка</dt>
                <dd class="hidden spoiler-body">
                    Тело окна
                </dd>
            </dl>  
        </section>
        <section>
            <h2>Всплывающее окно</h2>
            <div class="spat popup">
                <button class="read_more" type="button">
                    Кнопка
                </button>
                <div class="hidden popup_body">
                    Тело окна
                </div>
            </div>
        </section>
        <section>
            <h2>Аккордион</h2>
            <dl class="spat accrd">
                <dt class="read_more opnDflt">Пункт 1</dt>
                <dd class="hidden">Тело пункта 1</dd>
                <dt class="read_more">Пункт 2</dt>
                <dd class="hidden">Тело пункта 2</dd>
                <dt class="read_more">Пункт 3</dt>
                <dd class="hidden">Тело пункта 3</dd>
            </dl>
        </section>
        <section>
            <h2>Табы</h2>
            <dl class="spat tab">
                <dt class="read_more opnDflt" data-role="tab">Пункт 1</dt>
                <dd class="hidden">Тело пункта 1</dd>
                <dt class="read_more" data-role="tab">Пункт 2</dt>
                <dd class="hidden" >Тело пункта 2</dd>
                <dt class="read_more" data-role="tab">Пункт 3</dt>
                <dd class="hidden">Тело пункта 3</dd>
            </dl>
        </section>

CSS

h1{
 text-align: center;   
}
section{
    width: 50%;
    margin: 1em auto;
    padding: 1em;
    border-bottom: 1px dashed;
}
section h2{
    font-family: sans-serif;
    text-align: center;
}
.spoiler{

}
.spoiler dt{
    background: #ececec;
    width: 5em;
    text-align: center;
    border: 1px solid;
    padding: .5em 1em;
    cursor: pointer;
}
.spoiler dt:before{
    content: "+";
    margin-right: 1em;
}
.spoiler dt.folded:before{
    content: "-";
}
.spoiler dd{
    height: 5em;
    background: red;
    margin:0;
    margin-top: 1em;
}

.popup{

}
.popup>button{
    padding: .5em 1em;
    font-size: 1em;
    cursor: pointer;
}
.popup>button.folded:after{
    content: '' ;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: block;
    background: #000;
    opacity: .5;
    cursor: pointer;
}
.popup>button.folded:before{
    content: 'x';
    position: fixed;
    z-index: 2;
    background: #ececec;
    height: 1em;
    width: 1em;
    line-height: 1em;
    border: 1px solid;
    top: 50%;
    left: 50%;
    margin-top: -4em;
    margin-left: 8em;
    cursor: pointer;
}
.popup>.popup_body{
    position: fixed;
    z-index: 1;
    background: #fff;
    top: 50%;
    left: 50%;
    height: 10em;
    width: 20em;
    margin-left: -10em;
    margin-top: -5em;
    text-align: center;
    line-height: 10em;
}
.accrd{

}
.accrd dl{

}
.accrd dt{
    background: #ececec;
    cursor:pointer;
}
.accrd dt:first-child{
    border-top: 1px solid;
}
.accrd dt:before{
    content: '+';
    margin-right: 1em;
    width: 1em;
    display: inline-block;
}
.accrd dt.folded:before{
    content: '-'
}
.accrd dd{
}
.accrd dd, .accrd dt{
    padding: .5em 1em;
    border: 1px solid;
    border-top: 0px;
    margin: 0;
}
dl.tab:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    width: 100%;
}
.tab dt.folded{
    color: #000;
    font-weight: 600;
}
.tab dt {
    float: left;
   ...

JavaScript

jQuery(document).ready(function () {
    /* spoiler-popup-accord-tab */
    $('.hidden').hide();
    $('.opnDflt').addClass('folded').next('.hidden').show();
    $('.read_more').on('click', function () {
        if ($(this).hasClass('folded')) {
            if (!($(this).attr('data-role') === 'tab')) {
                $(this).parents('.spat').eq(0).find('.hidden').hide();
                $(this).parents('.spat').eq(0).find('.folded').removeClass('folded');
                $('.opnDflt').addClass('folded').next('.hidden').show();
            }
        } else {
            $(this).parents('.spat').eq(0).find('.hidden').hide();
            $(this).parents('.spat').eq(0).find('.folded').removeClass('folded');
            jQuery(this).addClass('folded').next().toggle();
        }
    });
});