The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion..
The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion..
<div class="accordion">
<!-- Basic Accordion 1 -->
<div class="accordion-item">
<input type="checkbox" id="basic-1" class="accordion-toggle">
<label for="basic-1" class="accordion-header">What admin theme does?</label>
<div class="accordion-content">
<p>Answer for basic question 1 goes here.</p>
</div>
</div>
<!-- Basic Accordion 2 -->
<div class="accordion-item">
<input type="checkbox" id="basic-2" class="accordion-toggle">
<label for="basic-2" class="accordion-header">How do I customize the theme?</label>
<div class="accordion-content">
<p>Answer for basic question 2 goes here.</p>
</div>
</div>
</div>
<!-- CSS -->
.accordion {
background-color: #f7f8fa;
border: 1px solid #ddd;
}
The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion..
The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion..
<div class="accordion">
<!-- Controlled Accordion 1 -->
<div class="accordion-item">
<input type="checkbox" id="controlled-1" class="accordion-toggle">
<label for="controlled-1" class="accordion-header">What admin theme does?</label>
<div class="accordion-content">
<p>Answer for controlled question 1 goes here.</p>
</div>
</div>
<!-- Controlled Accordion 2 -->
<div class="accordion-item">
<input type="checkbox" id="controlled-2" class="accordion-toggle">
<label for="controlled-2" class="accordion-header">How do I control it?</label>
<div class="accordion-content">
<p>Answer for controlled question 2 goes here.</p>
</div>
</div>
</div>
<!-- CSS -->
.accordion {
background-color: #f7f8fa;
border: 1px solid #ddd;
}
The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion..
The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion..
<div class="accordion">
<!-- Outlined Accordion 1 -->
<div class="accordion-item outlined">
<input type="checkbox" id="outlined-1" class="accordion-toggle">
<label for="outlined-1" class="accordion-header">What admin theme does?</label>
<div class="accordion-content">
<p>Answer for outlined question 1 goes here.</p>
</div>
</div>
<!-- Outlined Accordion 2 -->
<div class="accordion-item outlined">
<input type="checkbox" id="outlined-2" class="accordion-toggle">
<label for="outlined-2" class="accordion-header">How do I outline it?</label>
<div class="accordion-content">
<p>Answer for outlined question 2 goes here.</p>
</div>
</div>
</div>
<!-- CSS -->
.accordion {
background-color: #f7f8fa;
border: 1px solid #ddd;
}