Акордеон елемент в WordPress без плъгини

22 апр. 2019 | Без плъгини
Акордеон елемент в WordPress без плъгини

Акордеон (Accordion) елементът е много подходящ за секцията Често задавани въпроси (FAQ) в нашия WordPress сайт. Предимството му е, че може да се свива и не заема много място в страницата ни. Плъгините, с които можем да си добавим Акордеон във WordPress, са безкрайно много и пълни с всякакви екстри и скриптове, и неминуемо утежняват сайта ни. Но на нас едва ли са ни нужни стотици варианти и възможности за персонализиране.

Ето два семпли респонсив Акордеона, направени без плъгини и само с малко CSS и HTML. В първия случай можем да отваряме колкото искаме таба наведнъж, а във втория отварянето на нов таб води до затваряне на предишния отворен.

Вариант 1: Няколко отворени таба наведнъж

Ето два семпли респонсив Акордеона, направени само с малко CSS и HTML.

Акордеон (Accordion) елементът е много подходящ за секцията Често задавани въпроси (FAQ) в нашия сайт. Предимството му е, че може да се свива и не заема много място в страницата ни.

Плъгините, с които можем да си добавим Акордеон във WordPress, са безкрайно много и пълни с всякакви екстри и скриптове, и неминуемо утежняват сайта ни. Но на нас едва ли са ни нужни стотици варианти и възможности за персонализиране.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Вариант 2: Само един отворен таб

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

За целта добавете следния код в CSS файла на темата си. Можете да си зададете други цветове за фоновете и текстовете по ваше желание. В случая за класа tab е зададена стойност margin-bottom: -19px. Това е необходимо за да компенсираме, тъй като WordPress автоматично вкарва таба в параграф и разстоянията между табовете стават големи. Вие си задайте стойност, според това какви отстояния са ви зададени за параграфа в CSS файла на темата.

.accordion {float: left; width: 100%}
.tab {position: relative; margin-bottom: -19px; width: 100%; overflow: hidden}
.tab input {position: absolute; opacity: 0; z-index: -1}
.tab label {position: relative; display: block; background: #d70000; font-weight: bold; line-height: 1.4; padding:8px 16px; cursor: pointer; color: #fff}
.tab label:hover, .tab input:checked + label{background-color: #af0000;}
.tab-content {max-height: 0; overflow: hidden; background: #fcfcfc; -webkit-transition: max-height .3s; -o-transition: max-height .3s; transition: max-height .3s; color: #333}
.tab-content p {margin: 1em}
.tab input:checked ~ .tab-content {max-height: 100vh}
.tab label::after {font-weight: bold; font-size: 14px;float: right; margin-left: 5px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s}
.tab input[type=checkbox] + label::after, .tab input[type=radio] + label::after {content: "+"}
.tab input[type=checkbox]:checked + label::after, .tab input[type=radio]:checked + label::after {transform: rotate(45deg)}

След това си направете страница Често задавани въпроси и добавете в нея следния HTML код, в зависимост кой от двата варианта предпочитате:

Вариант 1: Няколко отворени таба наведнъж

<div class="accordion">
<div class="tab">
<input id="tab-1" type="checkbox" name="tabs"><label for="tab-1">Въпрос 1</label>
<div class="tab-content">
<p>Отговор 1</p>
</div>
</div>
<div class="tab">
<input id="tab-2" type="checkbox" name="tabs"><label for="tab-2">Въпрос 2</label>
<div class="tab-content">
<p>Отговор 2</p>
</div>
</div>
<div class="tab">
<input id="tab-3" type="checkbox" name="tabs"><label for="tab-3">Въпрос 3</label>
<div class="tab-content">
<p>Отговор 3</p>
</div>
</div>
</div>

Вариант 2: Само един отворен таб

<div class="accordion">
<div class="tab">
<input id="tab-1" type="radio" name="tabs"><label for="tab-1">Въпрос 1</label>
<div class="tab-content">
<p>Отговор 1</p>
</div>
</div>
<div class="tab">
<input id="tab-2" type="radio" name="tabs"><label for="tab-2">Въпрос 2</label>
<div class="tab-content">
<p>Отговор 2</p>
</div>
</div>
<div class="tab">
<input id="tab-3" type="radio" name="tabs"><label for="tab-3">Въпрос 3</label>
<div class="tab-content">
<p>Отговор 3</p>
</div>
</div>
<div class="tab">
<input id="tab-4" type="radio" name="tabs"><label for="tab-4">Въпрос 4</label>
<div class="tab-content">
<p>Отговор 4</p>
</div>
</div>
</div>