Очень простой и действенный акордеон акордеон на чистом 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>