Wanted to create accordion on your Bootstrap site? Here are the code blocks accordion, tabs, FAQ and toggle elements in Web-Boots theme’s. You can easily create frequently asked questions, questions & answers or any similar content with these content blocks.
Ensure to replace the text, image and video content in the demo code with your own content.
Tabs with gradient background
<section class="tabs2 cid-rkNLkFLMDC" id="tabs2-1q">
<div class="container">
<h2 class="wn-section-title align-center pb-5 wn-fonts-style display-2">
Tabs with gradient background
</h2>
<div class="media-container-row">
<div class="col-12 col-md-8">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active wn-fonts-style display-7" role="tab" data-toggle="tab" href="#tab1">
Mobile Friendly
</a>
</li>
<li class="nav-item"><a class="nav-link wn-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs2-1q_tab1" aria-selected="true">
No Coding
</a></li>
<li class="nav-item"><a class="nav-link wn-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs2-1q_tab2" aria-selected="true">
Unique Styles
</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane in active" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab2" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab3" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab4" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab5" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab6" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Tabs with parallax background
<section class="tabs1 cid-rkNLjyVwNE wn-parallax-background" id="tabs1-1p">
<div class="wn-overlay" style="opacity: 0.6; background-color: rgb(35, 35, 35);">
</div>
<div class="container">
<h2 class="wn-white align-center pb-5 wn-fonts-style wn-bold display-2">
Tabs with parallax background
</h2>
<div class="media-container-row">
<div class="col-12 col-md-8">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link wn-fonts-style show active display-7" role="tab" data-toggle="tab" href="#tabs1-1p_tab0" aria-selected="true">
Mobile Friendly
</a></li>
<li class="nav-item"><a class="nav-link wn-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs1-1p_tab1" aria-selected="true">
No Coding
</a></li>
<li class="nav-item"><a class="nav-link wn-fonts-style show active display-7" role="tab" data-toggle="tab" href="#tabs1-1p_tab2" aria-selected="true">
Unique Styles
</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane in active" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab2" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab3" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Tabs with columns
<section class="tabs3 cid-rkNLlfQaNh" id="tabs3-1r">
<div class="container">
<h2 class="wn-section-title align-center pb-3 wn-fonts-style display-2">
Tabs with columns
</h2>
<h3 class="wn-section-subtitle display-5 align-center wn-light wn-fonts-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
<div class="container-fluid">
<div class="row tabcont">
<ul class="nav nav-tabs pt-3 mt-5" role="tablist">
<li class="nav-item wn-fonts-style">
<a class="nav-link active display-7" role="tab" data-toggle="tab" href="#tab1">
Responsive
</a>
</li>
<li class="nav-item wn-fonts-style"><a class="nav-link active show display-7" role="tab" data-toggle="tab" href="#tabs3-1r_tab1" aria-selected="true">
No coding
</a></li>
<li class="nav-item wn-fonts-style"><a class="nav-link active show display-7" role="tab" data-toggle="tab" href="#tabs3-1r_tab2" aria-selected="true">
Unique Styles
</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row px-1">
<div class="tab-content">
<div id="tab1" class="tab-pane in active wn-table" role="tabpanel">
<div class="row tab-content-row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-responsive wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
MOBILE FRIENDLY
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-responsive wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
MOBILE FRIENDLY
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-responsive wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
MOBILE FRIENDLY
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab2" class="tab-pane wn-table" role="tabpanel">
<div class="row tab-content-row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-bootstrap wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
IT'S EASY AND SIMPLE
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-bootstrap wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
IT'S EASY AND SIMPLE
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-bootstrap wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
IT'S EASY AND SIMPLE
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab3" class="tab-pane wn-table" role="tabpanel">
<div class="row tab-content-row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-extension wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
TRENDY WEBSITE BLOCKS
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-extension wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
TRENDY WEBSITE BLOCKS
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-extension wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
TRENDY WEBSITE BLOCKS
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab4" class="tab-pane wn-table" role="tabpanel">
<div class="row tab-content-row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-responsive wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
MOBILE FRIENDLY
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-responsive wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
MOBILE FRIENDLY
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-responsive wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
MOBILE FRIENDLY
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit.
</p>
</div>
</div>
</div>
<div id="tab5" class="tab-pane wn-table" role="tabpanel">
<div class="row tab-content-row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-bootstrap wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
IT'S EASY AND SIMPLE
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Cut down the development time with drag-and-drop website builder. Drop the blocks into the page, edit content inline and publish - no technical skills required.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-bootstrap wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
IT'S EASY AND SIMPLE
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Cut down the development time with drag-and-drop website builder. Drop the blocks into the page, edit content inline and publish - no technical skills required.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-bootstrap wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
IT'S EASY AND SIMPLE
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Cut down the development time with drag-and-drop website builder. Drop the blocks into the page, edit content inline and publish - no technical skills required.
</p>
</div>
</div>
</div>
<div id="tab6" class="tab-pane wn-table" role="tabpanel">
<div class="row tab-content-row">
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-extension wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
TRENDY WEBSITE BLOCKS
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Choose from the large selection pre-made blocks - full-screen intro, bootstrap carousel, slider, responsive image gallery with, parallax scrolling, sticky header and more.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-extension wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
TRENDY WEBSITE BLOCKS
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Choose from the large selection pre-made blocks - full-screen intro, bootstrap carousel, slider, responsive image gallery with, parallax scrolling, sticky header and more.
</p>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="card-img ">
<span class="wns-extension wn-iconfont"></span>
</div>
<h4 class="wn-element-title align-center wn-fonts-style pb-2 display-5">
TRENDY WEBSITE BLOCKS
</h4>
<p class="wn-section-text align-center wn-fonts-style display-7">
Choose from the large selection pre-made blocks - full-screen intro, bootstrap carousel, slider, responsive image gallery with, parallax scrolling, sticky header and more.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Tabs and media
<section class="tabs4 cid-rkNLpiSp8J" id="tabs4-1s">
<div class="container">
<h2 class="wn-section-title align-center pb-3 wn-fonts-style display-2">
Tabs and media
</h2>
<div class="media-container-row mt-5 pt-3">
<div class="wn-figure" style="width: 60%;">
<img src="assets/images/background6.jpg" alt="Web-Boots">
</div>
<div class="tabs-container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link wn-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs4-1s_tab0" aria-selected="true">
Responsive
</a></li>
<li class="nav-item"><a class="nav-link wn-fonts-style active show display-7" role="tab" data-toggle="tab" href="#tabs4-1s_tab1" aria-selected="true">
Creative
</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane in active" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div id="tab2" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div id="tab3" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab4" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab5" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div id="tab6" class="tab-pane" role="tabpanel">
<div class="row">
<div class="col-md-12">
<p class="wn-text py-5 wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Accordion FAQ
<section class="accordion1 cid-rkNLq55wI9" id="accordion1-1t">
<div class="container">
<div class="media-container-row">
<div class="col-12 col-md-8">
<div class="section-head text-center space30">
<h2 class="wn-section-title pb-5 wn-fonts-style display-2">
Accordion FAQ
</h2>
</div>
<div class="clearfix"></div>
<div id="bootstrap-accordion_292" class="panel-group accordionStyles accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<a role="button" class="panel-title collapsed text-black" data-toggle="collapse" data-core="" href="#collapse1_292" aria-expanded="false" aria-controls="collapse1">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span>
What is Web-Boots?
</h4>
</a>
</div>
<div id="collapse1_292" class="panel-collapse noScroll collapse " role="tabpanel" aria-labelledby="headingOne" data-parent="#bootstrap-accordion_292">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse2_292" aria-expanded="false" aria-controls="collapse2">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> Is it good for me?
</h4>
</a>
</div>
<div id="collapse2_292" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#bootstrap-accordion_292">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<a role="button" class="collapsed text-black panel-title" data-toggle="collapse" data-core="" href="#collapse3_292" aria-expanded="false" aria-controls="collapse3">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> Why Web-Boots?
</h4>
</a>
</div>
<div id="collapse3_292" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#bootstrap-accordion_292">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Accordion with media
<section class="accordion2 cid-rkNLqY0vkG" id="accordion2-1u">
<div class="container">
<div class="media-container-row pt-5">
<div class="accordion-content">
<h2 class="wn-section-title align-center pb-3 wn-fonts-style display-2">
Accordion with media
</h2>
<div id="bootstrap-accordion_293" class="panel-group accordionStyles accordion pt-5 mt-3" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse1_293" aria-expanded="false" aria-controls="collapse1">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> What is Web-Boots?
</h4>
</a>
</div>
<div id="collapse1_293" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#bootstrap-accordion_293">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse2_293" aria-expanded="false" aria-controls="collapse2">
<h4 class="wn-fonts-style wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> Is it good for me?
</h4>
</a>
</div>
<div id="collapse2_293" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#bootstrap-accordion_293">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse3_293" aria-expanded="false" aria-controls="collapse3">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> Why Web-Boots?
</h4>
</a>
</div>
<div id="collapse3_293" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#bootstrap-accordion_293">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
<div class="wn-figure" style="width: 105%;">
<img src="assets/images/background8.jpg" alt="Web-Boots">
</div>
</div>
</div>
</section>Toggle FAQ
<section class="toggle1 cid-rkNLrL4ZB0" id="toggle1-1v">
<div class="container">
<div class="media-container-row">
<div class="col-12 col-md-8">
<div class="section-head text-center space30">
<h2 class="wn-section-title pb-5 wn-fonts-style display-2">
Toggle FAQ
</h2>
</div>
<div class="clearfix"></div>
<div id="bootstrap-toggle" class="toggle-panel accordionStyles tab-content">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse1_294" aria-expanded="false" aria-controls="collapse1">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> What is Web-Boots?
</h4>
</a>
</div>
<div id="collapse1_294" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse2_294" aria-expanded="false" aria-controls="collapse2">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> Is it good for me?
</h4>
</a>
</div>
<div id="collapse2_294" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse3_294" aria-expanded="false" aria-controls="collapse3">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span>Web-Boots</h4>
</a>
</div>
<div id="collapse3_294" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Toggle with media
<section class="toggle2 cid-rkNLsIOx1i" id="toggle2-1w">
<div class="container">
<div class="media-container-row">
<div class="toggle-content">
<h2 class="wn-section-title pb-3 align-left wn-fonts-style display-2">
Toggle with media
</h2>
<div id="bootstrap-toggle" class="toggle-panel accordionStyles tab-content pt-5 mt-2">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse1_295" aria-expanded="false" aria-controls="collapse1">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> What is Web-Boots?
</h4>
</a>
</div>
<div id="collapse1_295" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse2_295" aria-expanded="false" aria-controls="collapse2">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> Is it good for me?
</h4>
</a>
</div>
<div id="collapse2_295" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<a role="button" class="collapsed panel-title text-black" data-toggle="collapse" data-core="" href="#collapse3_295" aria-expanded="true" aria-controls="collapse3">
<h4 class="wn-fonts-style display-5">
<span class="sign wn-iconfont wns-arrow-down inactive"></span> Why Web-Boots?
</h4>
</a>
</div>
<div id="collapse3_295" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body p-4">
<p class="wn-fonts-style panel-text display-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
<div class="wn-figure" style="width: 89%;">
<img src="assets/images/background7.jpg" alt="Web-Boots">
</div>
</div>
</div>
</section>