Главная » DARYA DLE » Скрипты » Акордеон на checkbox и css
473 0  

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

Акордеон или баян  для скрития части текста  более рационального использования пространства страницы без скриптов на 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>

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

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

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