» » » Акордеон на checkbox и css
81 0  

Акордеон на checkbox и css

Акордеон или баян  для скрития части текста  более рационального использования пространства страницы без скриптов на checkbox и css.

Код и стили для акордеона (баяна):

<!-- 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 {min-height: 0;display: block;margin: 0 auto;padding: 0;overflow: hidden;z-index:50;}
.acordgr-1 h5 {font-size:14px;display:block;text-transform:uppercase;color: #181818;background-color: #777;font-size: 16px;font-weight: 400;margin-bottom: 10px;padding: 15px 0 16px 0;border-radius: 2px;cursor: pointer;}
.acordgr-1 h5:hover {display: block;background-color: #005049;}
.acordgr-1box {position: relative;overflow: hidden;max-height: 800px;opacity: 1;transform: translate(0, 0);transition: all 500ms linear;}
.acordgr-1 ul {list-style: none;padding: 0;margin:0 0 0 15px;}
.acordgr-1 ul li {position: relative;padding: 0;margin: 0;}
.acordgr-1 ul li:nth-of-type(1) {animation-delay: 0.5s;}
.acordgr-1 ul li:nth-of-type(2) {animation-delay: 0.75s;}
.acordgr-1 ul li:nth-of-type(3) {animation-delay: 1s;}
.acordgr-1 ul li:last-of-type {padding-bottom: 0;}
.acordgr-1 ul li i {position: absolute;transform: translate(-6px, 0);}
.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 ~ div.acordgr-1box {margin-top: 0;max-height: 0;opacity: 0;transform: translate(0, 50%);}
.acordgr-1 ul li input[type=checkbox]:checked ~ i:before {transform: translate(2px, 0) rotate(45deg);}
.acordgr-1 ul li input[type=checkbox]:checked ~ i:after {transform: translate(-2px, 0) rotate(-45deg);}
div.msg, ul li i:before, ul li i:after {transition: all 0.5s ease-in-out;}
</style>

*<i></i> - это иконка

Демо работы акордеона:

  • Вірш 1
    Після того як греки спалили Трою, Еней [один із героїв Троянської війни в античній літературі] з деякими троянцями, зробивши човни, поплив морем. Але Юнона, дружина Зевса [царя богів і людей, бога неба, грому і блискавки], була на стороні греків і дуже не любила Енея:
  • Вірш 2
    З неба Юнона побачила, що Еней на морі, взяла хліб із сіллю і помчала до Еола [бога вітрів], щоб той здійняв на морі бурю і потопив Енея і його людей, а за це пообіцяла: За сеє ж дівку чорнобриву, Смачную, гарну, уродливу Тобі я, далебі, що дам.
  • Вірш 3
    Венера запитала Зевса, чим так перед ним завинив Еней, що Юнона ледве не згубила її сина. Зевс не розумів тривоги Венери, оскільки доля Енея уже була вирішена і ніхто не міг її змінити, бо Зевс велів йому їхати до Риму і: Еней збудує сильне царство І заведе своє там панство; Не малий буде він панок. На панщину весь світ погонить, Багацько хлопців там наплодить І всім їм буде ватажок.

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019