|
|
| Zeile 1: |
Zeile 1: |
| − | <div class="container my-4">
| |
| | | | |
| − | <p class="font-weight-bold">Example of bootstrap accordion with animated arrows.</p>
| |
| − |
| |
| − | <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/standard/components/accordion/"
| |
| − | target="_blank">Bootstrap Accordion Docs</a> </p>
| |
| − |
| |
| − | <hr class="mt-5">
| |
| − |
| |
| − | <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
| |
| − |
| |
| − | <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
| |
| − | <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
| |
| − | <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
| |
| − | <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>
| |
| − |
| |
| − | <hr class="mb-5"/>
| |
| − |
| |
| − | <p class="font-weight-bold">Basic example</p>
| |
| − |
| |
| − | <!--Accordion wrapper-->
| |
| − | <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
| |
| − |
| |
| − | <!-- Accordion card -->
| |
| − | <div class="card">
| |
| − |
| |
| − | <!-- Card header -->
| |
| − | <div class="card-header" role="tab" id="headingOne1">
| |
| − | <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
| |
| − | aria-controls="collapseOne1">
| |
| − | <h5 class="mb-0">
| |
| − | Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
| |
| − | </h5>
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Card body -->
| |
| − | <div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
| |
| − | data-parent="#accordionEx">
| |
| − | <div class="card-body">
| |
| − | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
| |
| − | wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
| |
| − | eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
| |
| − | assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
| |
| − | nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
| |
| − | farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
| |
| − | labore sustainable VHS.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <!-- Accordion card -->
| |
| − |
| |
| − | <!-- Accordion card -->
| |
| − | <div class="card">
| |
| − |
| |
| − | <!-- Card header -->
| |
| − | <div class="card-header" role="tab" id="headingTwo2">
| |
| − | <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
| |
| − | aria-expanded="false" aria-controls="collapseTwo2">
| |
| − | <h5 class="mb-0">
| |
| − | Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
| |
| − | </h5>
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Card body -->
| |
| − | <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
| |
| − | data-parent="#accordionEx">
| |
| − | <div class="card-body">
| |
| − | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
| |
| − | wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
| |
| − | eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
| |
| − | assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
| |
| − | nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
| |
| − | farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
| |
| − | labore sustainable VHS.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <!-- Accordion card -->
| |
| − |
| |
| − | <!-- Accordion card -->
| |
| − | <div class="card">
| |
| − |
| |
| − | <!-- Card header -->
| |
| − | <div class="card-header" role="tab" id="headingThree3">
| |
| − | <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
| |
| − | aria-expanded="false" aria-controls="collapseThree3">
| |
| − | <h5 class="mb-0">
| |
| − | Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
| |
| − | </h5>
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Card body -->
| |
| − | <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
| |
| − | data-parent="#accordionEx">
| |
| − | <div class="card-body">
| |
| − | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
| |
| − | wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
| |
| − | eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
| |
| − | assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
| |
| − | nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
| |
| − | farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
| |
| − | labore sustainable VHS.
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <!-- Accordion card -->
| |
| − |
| |
| − | </div>
| |
| − | <!-- Accordion wrapper -->
| |
| − |
| |
| − | </div>
| |
