Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save TrueSlu/319f8ae3bb4e71b2de5b22c715f19dbb to your computer and use it in GitHub Desktop.
Save TrueSlu/319f8ae3bb4e71b2de5b22c715f19dbb to your computer and use it in GitHub Desktop.
Bootstrap 4.1 FAQ example with tabs and accordions

Bootstrap 4.1 FAQ example with tabs and accordions

** NEW ** Updated for Bootstrap 4.x

FAQ example with tabs and accordions in vertical navigation.

Notice: It's very important that you get the ID's right. The Bootstrap JS is matching up the accordion/collapse with data-target, and if you get them wrong, it won't work as intended.

A Pen by TrueSlu on CodePen.

License.

<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="nav nav-pills faq-nav" id="faq-tabs" role="tablist" aria-orientation="vertical">
<a href="#tab1" class="nav-link active" data-toggle="pill" role="tab" aria-controls="tab1" aria-selected="true">
<i class="mdi mdi-help-circle"></i> Frequently Asked Questions
</a>
<a href="#tab2" class="nav-link" data-toggle="pill" role="tab" aria-controls="tab2" aria-selected="false">
<i class="mdi mdi-account"></i> Profile
</a>
<a href="#tab3" class="nav-link" data-toggle="pill" role="tab" aria-controls="tab3" aria-selected="false">
<i class="mdi mdi-account-settings"></i> Account
</a>
<a href="#tab4" class="nav-link" data-toggle="pill" role="tab" aria-controls="tab4" aria-selected="false">
<i class="mdi mdi-heart"></i> Favorites
</a>
<a href="#tab5" class="nav-link" data-toggle="pill" role="tab" aria-controls="tab5" aria-selected="false">
<i class="mdi mdi-coin"></i> Transactions
</a>
<a href="#tab6" class="nav-link" data-toggle="pill" role="tab" aria-controls="tab6" aria-selected="false">
<i class="mdi mdi-help"></i> General help
</a>
</div>
</div>
<div class="col-lg-8">
<div class="tab-content" id="faq-tab-content">
<div class="tab-pane show active" id="tab1" role="tabpanel" aria-labelledby="tab1">
<div class="accordion" id="accordion-tab-1">
<div class="card">
<div class="card-header" id="accordion-tab-1-heading-1">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-1-content-1" aria-expanded="false" aria-controls="accordion-tab-1-content-1">Just once I'd like to eat dinner with a celebrity?</button>
</h5>
</div>
<div class="collapse show" id="accordion-tab-1-content-1" aria-labelledby="accordion-tab-1-heading-1" data-parent="#accordion-tab-1">
<div class="card-body">
<p>Yes, if you make it look like an electrical fire. When you do things right, people won't be sure you've done anything at all. I was having the most wonderful dream. Except you were there, and you were there, and you were there! No argument here. Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be.</p>
<p><strong>Example: </strong>Shut up and get to the point!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-1-heading-2">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-1-content-2" aria-expanded="false" aria-controls="accordion-tab-1-content-2">Bender, I didn't know you liked cooking?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-1-content-2" aria-labelledby="accordion-tab-1-heading-2" data-parent="#accordion-tab-1">
<div class="card-body">
<p>That's so cute. Can we have Bender Burgers again? Is the Space Pope reptilian!? I wish! It's a nickel. Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>
<p><strong>Example: </strong>Okay, I like a challenge. Is that a cooking show? No argument here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-1-heading-3">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-1-content-3" aria-expanded="false" aria-controls="accordion-tab-1-content-3">My fellow Earthicans?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-1-content-3" aria-labelledby="accordion-tab-1-heading-3" data-parent="#accordion-tab-1">
<div class="card-body">
<p>As I have explained in my book 'Earth in the Balance', and the much more popular 'Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards. Fry, you can't just sit here in the dark listening to classical music.</p>
<p><strong>Example: </strong>Actually, that's still true. Well, let's just dump it in the sewer and say we delivered it.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-1-heading-4">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-1-content-4" aria-expanded="false" aria-controls="accordion-tab-1-content-4">Who am I making this out to?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-1-content-4" aria-labelledby="accordion-tab-1-heading-4" data-parent="#accordion-tab-1">
<div class="card-body">
<p>Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Also Zoidberg. Can we have Bender Burgers again? Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords.</p>
<p><strong>Example: </strong>Cruel though they may be...</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2" role="tabpanel" aria-labelledby="tab2">
<div class="accordion" id="accordion-tab-2">
<div class="card">
<div class="card-header" id="accordion-tab-2-heading-1">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-2-content-1" aria-expanded="false" aria-controls="accordion-tab-2-content-1">Does anybody else feel jealous and aroused and worried?</button>
</h5>
</div>
<div class="collapse show" id="accordion-tab-2-content-1" aria-labelledby="accordion-tab-2-heading-1" data-parent="#accordion-tab-2">
<div class="card-body">
<p>Kif, I have mated with a woman. Inform the men. This is the worst part. The calm before the battle. Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket.</p>
<p><strong>Example: </strong>There's no part of that sentence I didn't like! You, a bobsleder!? That I'd like to see!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-2-heading-2">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-2-content-2" aria-expanded="false" aria-controls="accordion-tab-2-content-2">This opera's as lousy as it is brilliant?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-2-content-2" aria-labelledby="accordion-tab-2-heading-2" data-parent="#accordion-tab-2">
<div class="card-body">
<p>Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! It's okay, Bender. I like cooking too. Interesting. No, wait, the other thing: tedious.</p>
<p><strong>Example: </strong>Of all the friends I've had… you're the first. But I know you in the future. I cleaned your poop. Then we'll go with that data file!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-2-heading-3">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-2-content-3" aria-expanded="false" aria-controls="accordion-tab-2-content-3">Who are you, my warranty?!</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-2-content-3" aria-labelledby="accordion-tab-2-heading-3" data-parent="#accordion-tab-2">
<div class="card-body">
<p>Oh, I think we should just stay friends. I'll tell them you went down prying the wedding ring off his cold, dead finger. Aww, it's true. I've been hiding it for so long. Say it in Russian! Then throw her in the laundry room, which will hereafter be referred to as "the brig".</p>
<p><strong>Example: </strong> We're rescuing ya. Robot 1-X, save my friends! And Zoidberg! <em>Then we'll go with that data file!</em> Okay, I like a challenge.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-2-heading-4">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-2-content-4" aria-expanded="false" aria-controls="accordion-tab-2-content-4">I haven't felt much of anything since my guinea pig died?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-2-content-4" aria-labelledby="accordion-tab-2-heading-4" data-parent="#accordion-tab-2">
<div class="card-body">
<p>And I'm his friend Jesus. Oh right. I forgot about the battle. OK, if everyone's finished being stupid. We'll need to have a look inside you with this camera. I'm just glad my fat, ugly mama isn't alive to see this day.</p>
<p><strong>Example: </strong> Isn't it true that you have been paid for your testimony? Quite possible.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3" role="tabpanel" aria-labelledby="tab3">
<div class="accordion" id="accordion-tab-3">
<div class="card">
<div class="card-header" id="accordion-tab-3-heading-1">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-3-content-1" aria-expanded="false" aria-controls="accordion-tab-3-content-1">Michelle, I don't regret this, but I both rue and lament it?</button>
</h5>
</div>
<div class="collapse show" id="accordion-tab-3-content-1" aria-labelledby="accordion-tab-3-heading-1" data-parent="#accordion-tab-3">
<div class="card-body">
<p>Look, last night was a mistake. We'll need to have a look inside you with this camera. Good news, everyone! There's a report on TV with some very bad news! You know, I was God once. You lived before you met me?!</p>
<p><strong>Example: </strong>I'm Santa Claus! Pansy. That's a popular name today. Little "e", big "B"?</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-3-heading-2">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-3-content-2" aria-expanded="false" aria-controls="accordion-tab-3-content-2">Why am I sticky and naked?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-3-content-2" aria-labelledby="accordion-tab-3-heading-2" data-parent="#accordion-tab-3">
<div class="card-body">
<p>Did I miss something fun? Humans dating robots is sick. You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! Kids don't turn rotten just from watching TV.</p>
<p><strong>Example: </strong>I usually try to keep my sadness pent up inside where it can fester quietly as a mental illness.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-3-heading-3">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-3-content-3" aria-expanded="false" aria-controls="accordion-tab-3-content-3">Is that a cooking show?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-3-content-3" aria-labelledby="accordion-tab-3-heading-3" data-parent="#accordion-tab-3">
<div class="card-body">
<p>OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. You seem malnourished. Are you suffering from intestinal parasites? Check it out, y'all. Everyone who was invited is here. I am Singing Wind, Chief of the Martians.</p>
<p><strong>Example: </strong>Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-3-heading-4">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-3-content-4" aria-expanded="false" aria-controls="accordion-tab-3-content-4">You are the last hope of the universe?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-3-content-4" aria-labelledby="accordion-tab-3-heading-4" data-parent="#accordion-tab-3">
<div class="card-body">
<p>I don't want to be rescued. I videotape every customer that comes in here, so that I may blackmail them later. Ah, computer dating. It's like pimping, but you rarely have to use the phrase "upside your head."</p>
<p><strong>Example: </strong>Tell them I hate them.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab4" role="tabpanel" aria-labelledby="tab4">
<div class="accordion" id="accordion-tab-4">
<div class="card">
<div class="card-header" id="accordion-tab-4-heading-1">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-4-content-1" aria-expanded="false" aria-controls="accordion-tab-4-content-1">You, minion. Lift my arm?</button>
</h5>
</div>
<div class="collapse show" id="accordion-tab-4-content-1" aria-labelledby="accordion-tab-4-heading-1" data-parent="#accordion-tab-4">
<div class="card-body">
<p>AFTER HIM! A true inspiration for the children. What are you hacking off? Is it my torso?! 'It is!' My precious torso! I saw you with those two "ladies of the evening" at Elzars. Explain that. She also liked to shut up! Why not indeed!</p>
<p><strong>Example: </strong>I feel like I was mauled by Jesus. Hello, little man. I will destroy you!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-4-heading-2">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-4-content-2" aria-expanded="false" aria-controls="accordion-tab-4-content-2">No, I'm Santa Claus?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-4-content-2" aria-labelledby="accordion-tab-4-heading-2" data-parent="#accordion-tab-4">
<div class="card-body">
<p>I meant 'physically'. Look, perhaps you could let me work for a little food? I could clean the floors or paint a fence, or service you sexually? When the lights go out, it's nobody's business what goes on between two consenting adults.</p>
<p><strong>Example: </strong>Nay, I respect and admire Harold Zoid too much to beat him to death with his own Oscar.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-4-heading-3">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-4-content-3" aria-expanded="false" aria-controls="accordion-tab-4-content-3">Belligerent and numerous?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-4-content-3" aria-labelledby="accordion-tab-4-heading-3" data-parent="#accordion-tab-4">
<div class="card-body">
<p>Hey, what kinda party is this? There's no booze and only one hooker. I'm just glad my fat, ugly mama isn't alive to see this day. Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase. Well, let's just dump it in the sewer and say we delivered it. You guys realize you live in a sewer, right? </p>
<p><strong>Example: </strong>Oh Leela! You're the only person I could turn to; you're the only person who ever loved me.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-4-heading-4">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-4-content-4" aria-expanded="false" aria-controls="accordion-tab-4-content-4">Take me to your leader?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-4-content-4" aria-labelledby="accordion-tab-4-heading-4" data-parent="#accordion-tab-4">
<div class="card-body">
<p>PUNY HUMAN NUMBER ONE, PUNY HUMAN NUMBER TWO, and Morbo's good friend, Richard Nixon. Interesting. No, wait, the other thing: tedious. All I want is to be a monkey of moderate intelligence who wears a suit… that's why I'm transferring to business school! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p>
<p><strong>Example: </strong>If rubbin' frozen dirt in your crotch is wrong, hey I don't wanna be right.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab5" role="tabpanel" aria-labelledby="tab5">
<div class="accordion" id="accordion-tab-5">
<div class="card">
<div class="card-header" id="accordion-tab-5-heading-1">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-5-content-1" aria-expanded="false" aria-controls="accordion-tab-5-content-1">Say what?</button>
</h5>
</div>
<div class="collapse show" id="accordion-tab-5-content-1" aria-labelledby="accordion-tab-5-heading-1" data-parent="#accordion-tab-5">
<div class="card-body">
<p>That could be 'my' beautiful soul sitting naked on a couch. If I could just learn to play this stupid thing. Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. I'm just glad my fat, ugly mama isn't alive to see this day. For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored. But existing is basically all I do! I never loved you.</p>
<p><strong>Example: </strong>A sexy mistake. And I'd do it again!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-5-heading-2">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-5-content-2" aria-expanded="false" aria-controls="accordion-tab-5-content-2">Who's brave enough to fly into something we all keep calling a death sphere?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-5-content-2" aria-labelledby="accordion-tab-5-heading-2" data-parent="#accordion-tab-5">
<div class="card-body">
<p>Maybe I love you so much I love you no matter who you are pretending to be. Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff! Now Fry, it's been a few years since medical school, so remind me.</p>
<p><strong>Example: </strong>Disemboweling in your species: fatal or non-fatal?</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-5-heading-3">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-5-content-3" aria-expanded="false" aria-controls="accordion-tab-5-content-3">You mean while I'm sleeping in it?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-5-content-3" aria-labelledby="accordion-tab-5-heading-3" data-parent="#accordion-tab-5">
<div class="card-body">
<p>We can't compete with Mom! Her company is big and evil! Ours is small and neutral! Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? I just told you! You've killed me!</p>
<p><strong>Example: </strong>But, like most politicians, he promised more than he could deliver.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-5-heading-4">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-5-content-4" aria-expanded="false" aria-controls="accordion-tab-5-content-4">And until then, I can never die?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-5-content-4" aria-labelledby="accordion-tab-5-heading-4" data-parent="#accordion-tab-5">
<div class="card-body">
<p>I don't know what you did, Fry, but once again, you screwed up! Now all the planets are gonna start cracking wise about our mamas. Well, let's just dump it in the sewer and say we delivered it.</p>
<p><strong>Example: </strong>Have you ever tried just turning off the TV, sitting down with your children, and hitting them? Hey, tell me something. You've got all this money. How come you always dress like you're doing your laundry?</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab6" role="tabpanel" aria-labelledby="tab6">
<div class="accordion" id="accordion-tab-6">
<div class="card">
<div class="card-header" id="accordion-tab-6-heading-1">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-6-content-1" aria-expanded="false" aria-controls="accordion-tab-6-content-1">Doomsday device?</button>
</h5>
</div>
<div class="collapse show" id="accordion-tab-6-content-1" aria-labelledby="accordion-tab-6-heading-1" data-parent="#accordion-tab-6">
<div class="card-body">
<p>Ah, now the ball's in Farnsworth's court! We'll need to have a look inside you with this camera. Stop it, stop it. It's fine. I will 'destroy' you! Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually!</p>
<p><strong>Example: </strong>So I really am important? How I feel when I'm drunk is correct?</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-6-heading-2">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-6-content-2" aria-expanded="false" aria-controls="accordion-tab-6-content-2">And so we say goodbye to our beloved pet, Nibbler?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-6-content-2" aria-labelledby="accordion-tab-6-heading-2" data-parent="#accordion-tab-6">
<div class="card-body">
<p>Nibbler, who's gone to a place where I, too, hope one day to go. The toilet. But existing is basically all I do! I suppose I could part with 'one' and still be feared. I just told you! You've killed me!</p>
<p><strong>Example: </strong>What's with you kids? Every other day it's food, food, food.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-6-heading-3">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-6-content-3" aria-expanded="false" aria-controls="accordion-tab-6-content-3">Tell her you just want to talk?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-6-content-3" aria-labelledby="accordion-tab-6-heading-3" data-parent="#accordion-tab-6">
<div class="card-body">
<p>It has nothing to do with mating. Soon enough. There, now he's trapped in a book I wrote: a crummy world of plot holes and spelling errors! Daylight and everything. Hey! I'm a porno-dealing monster, what do I care what you think?</p>
<p><strong>Example: </strong>Is that a cooking show? It doesn't look so shiny to me. And why did 'I' have to take a cab?</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="accordion-tab-6-heading-4">
<h5>
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion-tab-6-content-4" aria-expanded="false" aria-controls="accordion-tab-6-content-4">Good man. Nixon's pro-war and pro-family?</button>
</h5>
</div>
<div class="collapse" id="accordion-tab-6-content-4" aria-labelledby="accordion-tab-6-heading-4" data-parent="#accordion-tab-6">
<div class="card-body">
<p>I don't 'need' to drink. I can quit anytime I want! THE BIG BRAIN AM WINNING AGAIN! I AM THE GREETEST! NOW I AM LEAVING EARTH, FOR NO RAISEN! There's one way and only one way to determine if an animal is intelligent. Dissect its brain!</p>
<p><strong>Example: </strong>Guess again. Yeah, I do that with my stupidness. And when we woke up, we had these bodies.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.3up.dk/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.3up.dk/[email protected]/dist/js/bootstrap.min.js"></script>
// Just for kicks and layout
body {
margin-top: 0px;
background-color: #eee;
}
// FAQ
.faq-nav {
flex-direction: column;
margin: 0 0 32px;
border-radius: 2px;
border: 1px solid #ddd;
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
.nav-link {
position: relative;
display: block;
margin: 0;
padding: 13px 16px;
background-color: #fff;
border: 0;
border-bottom: 1px solid #ddd;
border-radius: 0;
color: #616161;
transition: background-color .2s ease;
&:hover {
background-color: #f6f6f6;
}
&.active {
background-color: #f6f6f6;
font-weight: 700;
color: rgba(0,0,0,.87);
}
&:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom: 0;
}
i.mdi {
margin-right: 5px;
font-size: 18px;
position: relative;
}
}
}
// TAB CONTENT
.tab-content {
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
.card {
border-radius: 0;
}
.card-header {
padding: 15px 16px;
border-radius: 0;
background-color: #f6f6f6;
h5 {
margin: 0;
button {
display: block;
width: 100%;
padding: 0;
border: 0;
font-weight: 700;
color: rgba(0,0,0,.87);
text-align: left;
white-space: normal;
&:hover,
&:focus,
&:active,
&:hover:active {
text-decoration: none;
}
}
}
}
.card-body {
p {
color: #616161;
&:last-of-type {
margin: 0;
}
}
}
}
// BORDER FIX
.accordion {
> .card {
&:not(:first-child) {
border-top: 0;
}
}
}
.collapse.show {
.card-body {
border-bottom: 1px solid rgba(0,0,0,.125);
}
}
<link href="https://cdn.3up.dk/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.3up.dk/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment