Untitled Application
MyApp
Author name
1.0
False
600
500
False
False
False
False
WebApp
False
C:\Users\smartmedia\Documents\VisualNeoWeb\Libraries\img\default-icon.png
en
standalone
Offline page
#000000
/
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
BeginJS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
EndJs
row
<style>
.accordion {
background-color: #888899;
color: #FFFFFF;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #87CEEB;
}
.accordion:after {
content: '\2BC6';
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
float: right;
margin-left: 7px;
}
.active:after {
content: "\2BC5";
}
.accordion-panel {
padding: 0 15px;
text-align: justify;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<button class="accordion">Section 1</button>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
row
120px
35px
top
10px
Open All
glyphicon-triangle-bottom
BeginJS
var panels = document.getElementsByClassName("accordion-panel");
for (var j = 0; j < panels.length; j++) {
panels[j].style.maxHeight = panels[j].scrollHeight + "px";
}
EndJs
120px
35px
top
Close all
glyphicon-triangle-top
BeginJS
var panels = document.getElementsByClassName("accordion-panel");
for (var k = 0; k < panels.length; k++) {
panels[k].style.maxHeight = null;
}
EndJs
0px
0px
600px
500px
False
custom