Акордеон или баян для скрития части текста более рационального использования пространства страницы без скриптов на checkbox и css.
Простой акардеон (v1.01):
Демо работы акордеона:
Вірш 1
Після того як греки спалили Трою, Еней [один із героїв Троянської війни в античній літературі] з деякими троянцями, зробивши човни, поплив морем. Але Юнона, дружина Зевса [царя богів і людей, бога неба, грому і блискавки], була на стороні греків і дуже не любила Енея:
Вірш 2
З неба Юнона побачила, що Еней на морі, взяла хліб із сіллю і помчала до Еола [бога вітрів], щоб той здійняв на морі бурю і потопив Енея і його людей, а за це пообіцяла:
За сеє ж дівку чорнобриву, Смачную, гарну, уродливу Тобі я, далебі, що дам.
Вірш 3
Венера запитала Зевса, чим так перед ним завинив Еней, що Юнона ледве не згубила її сина. Зевс не розумів тривоги Венери, оскільки доля Енея уже була вирішена і ніхто не міг її змінити, бо Зевс велів йому їхати до Риму і:
Еней збудує сильне царство І заведе своє там панство; Не малий буде він панок. На панщину весь світ погонить, Багацько хлопців там наплодить І всім їм буде ватажок.
Виконуваний код:
<!-- Akordeon 1 -->
<div class="acordgr-1">
<ul>
<li><input type="checkbox"><i></i>
<h5>Вірш 1</h5><div class="acordgr-1box">
Після того як греки спалили Трою, Еней [один із героїв Троянської війни в античній літературі] з деякими троянцями, зробивши човни, поплив морем. Але Юнона, дружина Зевса [царя богів і людей, бога неба, грому і блискавки], була на стороні греків і дуже не любила Енея:
</div></li>
<li><input type="checkbox" checked><i></i>
<h5>Вірш 2</h5><div class="acordgr-1box">
З неба Юнона побачила, що Еней на морі, взяла хліб із сіллю і помчала до Еола [бога вітрів], щоб той здійняв на морі бурю і потопив Енея і його людей, а за це пообіцяла:
За сеє ж дівку чорнобриву, Смачную, гарну, уродливу Тобі я, далебі, що дам.
</div></li>
<li><input type="checkbox" checked><i></i>
<h5>Вірш 3</h5><div class="acordgr-1box">
Венера запитала Зевса, чим так перед ним завинив Еней, що Юнона ледве не згубила її сина. Зевс не розумів тривоги Венери, оскільки доля Енея уже була вирішена і ніхто не міг її змінити, бо Зевс велів йому їхати до Риму і:
Еней збудує сильне царство І заведе своє там панство; Не малий буде він панок. На панщину весь світ погонить, Багацько хлопців там наплодить І всім їм буде ватажок.
</div></li>
</ul>
</div>
<!-- /Akordeon 1 -->
<style>
/* Akordeon menu faq */
.acordgr-1 {overflow: hidden;}
.acordgr-1 h5 {display:block; width:100%; padding:12px 10px 10px 10px;background: black; color:#fff; font-size: 16px;font-weight: 400;}
.acordgr-1box {position: relative; padding:10px; background: grey; overflow: hidden; max-height: 800px;opacity: 1;transition: all 0.4s linear;}
.acordgr-1 ul {list-style: none;padding: 0;margin:0;}
.acordgr-1 ul li {position: relative;padding:0; margin:0; border-top: 1px solid grey;}
.acordgr-1 ul li:last-of-type {border-bottom: 1px solid grey;}
.acordgr-1 ul li i {position: absolute; position:absolute; right:10px; top:22px;} /* положение крестика */
.acordgr-1 li i:before, .acordgr-1 li i:after {display:block; content:''; width:16px; height:2px; background: #fff; margin-top:-3px; transition: all 0.5s ease-in-out;}
.acordgr-1 li input[type=checkbox]:checked ~ i:after, .acordgr-1 li input[type=checkbox]:checked ~ i:before {background: grey;}
.acordgr-1 li i:after {position:absolute; top:0; left:2px;}
.acordgr-1 ul li input[type=checkbox] {position: absolute;cursor: pointer;width: 100%;height: 100%;margin: 0;padding: 0;opacity: 0;}
.acordgr-1 ul li input[type=checkbox]:checked ~ .acordgr-1box {padding:0 10px 10px 10px;margin-top: 0;max-height: 0;opacity: 0;transform: translate(0, 50%);}
.acordgr-1 ul li input[type=checkbox]:checked ~ i:after {transform: translate(-2px, 0) rotate(90deg); }
.acordgr-1 ul li input[type=checkbox]:checked ~ h5 {background: none;padding:12px 10px 3px 10px; color:grey; }
</style>