😎 » DARYA DLE » Скрипты » Баян - акордеон на чистом js
505 0  

Баян - акордеон на чистом js

Очень простой и действенный акордеон акордеон на чистом js

Group Item #1

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она.

Group Item #2

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она.

Group Item #3

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она.

Виконуваний код:

<div class="container"> <div class="panel-group"> <h3 class="panel-title">Group Item #1</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #2</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #3</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> </div> </div> <script> [].forEach.call(document.querySelectorAll('.panel-title'), function(item) { item.addEventListener('click', function(e) { display=(this.nextElementSibling.style.display=='block') ? 'none' : 'block'; [].forEach.call(this.parentNode.querySelectorAll('.panel-body'), function(panels) { panels.style.display='none'; }); this.nextElementSibling.style.display=display; }); }); </script> <style> .panel-title { cursor: pointer; padding: 10px 15px; background-color: #f5f5f5; border: 1px solid #ddd; font-size: 16px; color: #333; border-radius: 4px;} .panel-body {display: none; height:auto; margin-bottom:30px; transition: block 0.5s;} .panel-active + .panel-body { display: block; } </style>

Залишити свій коментар:

Досвід у веброзробці:

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