How to Add Accordion Content Slider in Weebly?

Bootstrap framework has lot of user elements which also can be independently added on your Weebly site by adding piece of code. Content slider in accordion or spoiler style element is one of the Bootstrap elements called as collapse help to add larger content within a limited space. Though we had already explained CSS and Weebly App Center accordion, Bootstrap style offers another way to add accordion content slider on your Weebly site.

Accordion Content Slider for Weebly

The accordion has the following features:

• Mobile responsive auto aligning to the view ports of the device viewed on.
• Clicking on the title will opens up the content in push down style while closing the open content in push up style.
• By default the first slide is open when the page is loaded.
• You can add as many as slides to your accordion.
• Any HTML element can be added as part of the widget.
• The content area can be divided into 12 columns using Bootstrap grid structure.

Script:

Add the below script under footer code section of your page:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

CSS:

Link the below Bootstrap CSS under header code section of your page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

HTML:

In this example we have used, three sliders with the following details:

1. First slide having two columns. one with card image and other with card block. This section is created using card group layout.
2. Second slide is having a inverse card.
3. Third slide with text element inside a card block.

Ensure to replace the image URLs and dummy text content with your own.

<div id="accordion" role="tablist" aria-multiselectable="true">
 <!-- First Section -->
<div class="card">
<div class="card-header" role="tab" id="Firstheading">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Section 1 with Card Image and Card Block
</a>
</h5>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading">
<div class="card-group" style="margin:20px;">
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title">Card Title</h4>
<p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."</p>
</div>
</div>
</div>
</div>
</div>
<!-- Second Section -->
<div class="card">
<div class="card-header" role="tab" id="secondheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Section 2 with Inverse Card
</a>
</h5>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading">
<div class="card card-inverse" style="background-color: #333; margin:20px;">
<div class="card-block">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">This is a card with inverse color and background is set as black.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
<!-- Third Section -->
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Section 3 with Text Inside Card Block
</a>
</h5>
</div>
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
 <!-- Add More Sections Here -->
</div>

The three slider sections are highlighted with comments for understanding purpose and you can add more sections by adding the block of code and changing the id and href attributes accordingly. Remember Bootstrap is a framework which may affect other elements on Weebly. You may need to adjust the CSS based on your Weebly theme.