Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"faq accordian"
Bootstrap 4.0.0 Snippet by
ronnydodd
4.0.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
419
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="body"> <div class="faq-wrapper"> <input id="question1" type="checkbox" name="toggle" class="question" /> <label for="question1"> <h3>Member Center</h3> </label> <section id="answer1"> <script src="https://kit.fontawesome.com/90fead11e1.js" crossorigin="anonymous"></script> <div class="jumbotron"> <div class="row w-100"> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-hand-holding-heart" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Covid-19 Resources</h4></div> <div class="text-info text-center mt-2"><h5>Most Recent:</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-lightbulb" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Smart Buy</h4></div> <div class="text-info text-center mt-2"><h5>Shop Discounted Products</h5></div> <p>Pepsi</p> <p>Food Service</p> <p>More</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-file-alt" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Document Archive</h4></div> <div class="text-info text-center mt-2"><h5>Search For:</h5></div> <p>Marketing Materials</p> <p>Historical Assets</p> <p>League Materials</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-bowling-ball" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Bowling University</h4></div> <div class="text-info text-center mt-2"><h5>Next Course</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> </div> </div> </section> <input id="question2" type="checkbox" name="toggle" class="question" /> <label for="question2"> <h3>Marketing Center</h3> </label> <section id="answer2"> <div class="jumbotron"> <div class="row w-100"> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-hand-holding-heart" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Covid-19 Resources</h4></div> <div class="text-info text-center mt-2"><h5>Most Recent:</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-lightbulb" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Smart Buy</h4></div> <div class="text-info text-center mt-2"><h5>Shop Discounted Products</h5></div> <p>Pepsi</p> <p>Food Service</p> <p>More</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-file-alt" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Document Archive</h4></div> <div class="text-info text-center mt-2"><h5>Search For:</h5></div> <p>Marketing Materials</p> <p>Historical Assets</p> <p>League Materials</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-bowling-ball" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Bowling University</h4></div> <div class="text-info text-center mt-2"><h5>Next Course</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> </div> </div> </section> <input id="question3" type="checkbox" name="toggle" class="question" /> <label for="question3"> <h3>Text Marketing</h3> </label> <section id="answer3"> <div class="jumbotron"> <div class="row w-100"> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-hand-holding-heart" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Covid-19 Resources</h4></div> <div class="text-info text-center mt-2"><h5>Most Recent:</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-lightbulb" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Smart Buy</h4></div> <div class="text-info text-center mt-2"><h5>Shop Discounted Products</h5></div> <p>Pepsi</p> <p>Food Service</p> <p>More</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-file-alt" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Document Archive</h4></div> <div class="text-info text-center mt-2"><h5>Search For:</h5></div> <p>Marketing Materials</p> <p>Historical Assets</p> <p>League Materials</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-bowling-ball" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Bowling University</h4></div> <div class="text-info text-center mt-2"><h5>Next Course</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> </div> </div> </section> <input id="question4" type="checkbox" name="toggle" class="question" /> <label for="question4"> <h3>Business Center</h3> </label> <section id="answer4"> <div class="jumbotron"> <div class="row w-100"> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-hand-holding-heart" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Covid-19 Resources</h4></div> <div class="text-info text-center mt-2"><h5>Most Recent:</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-lightbulb" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Smart Buy</h4></div> <div class="text-info text-center mt-2"><h5>Shop Discounted Products</h5></div> <p>Pepsi</p> <p>Food Service</p> <p>More</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="far fa-file-alt" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Document Archive</h4></div> <div class="text-info text-center mt-2"><h5>Search For:</h5></div> <p>Marketing Materials</p> <p>Historical Assets</p> <p>League Materials</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> <div class="col-md-3"> <div class="card border-info mx-sm-1 p-3"> <div class="card border-info shadow text-info p-3 my-card" ><span class="fas fa-bowling-ball" aria-hidden="true"></span></div> <div class="text-info text-center mt-3"><h4>Bowling University</h4></div> <div class="text-info text-center mt-2"><h5>Next Course</h5></div> <p>BPAA Updates</p> <p>Reopening Resource Center</p> <p>Back to Bowling</p> <a href="https://bowlinguniversity.net/opening" class="btn btn-default">Default text here</a> <hr> </div> </div> </div> </div> </section> </div> </div>
.faq-wrapper { margin-bottom: 20px; border-top: 1px solid #f0f0f0; background: #fff; transform: translateZ(0); } input[type="checkbox"] { position: absolute; opacity: 0; } label img, label p { display: inline-block; vertical-align: top; } label img { margin-right: 10px; height: 1.4em; } label p { line-height: 1.4em; } label { position: relative; display: block; margin: 0 0 0 16px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; background: #fff; font-size: 1em; line-height: 1.2em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } label:after { position: absolute; top: 50%; right: 20px; margin-top: -10px; height: 20px; content: '>'; line-height: 20px; transform: rotate(90deg); } section { overflow: hidden; height: 0; transition: .3s all; } #question1:checked ~ label[for*='1']:after, #question2:checked ~ label[for*='2']:after, #question3:checked ~ label[for*='3']:after, #question4:checked ~ label[for*='4']:after { transform: rotate(270deg); } #question1:checked ~ #answer1, #question2:checked ~ #answer2, #question3:checked ~ #answer3, #question4:checked ~ #answer4 { height: auto; } section p { margin: 0; padding: 16px; border-bottom: 1px solid #f0f0f0; color: #999; font-size: 1em; line-height: 1.2em; } .my-card { position:absolute; left:40%; top:-20px; border-radius:50%; } p {text-align: center;} .btn-default { color: #fff; background-color: #0088CC; border-radius: 5px; }
Related:
See More
Template
Vue Black Dashboard Pro
196.6K
128
Accordian Menu
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76