Skip to content

Instantly share code, notes, and snippets.

@lxmmxl56

lxmmxl56/respTabsAcc.html

Created July 22, 2019 03:32
Show Gist options
  • Save lxmmxl56/3afdd36b842bf1d9300ff41b5a6fc147 to your computer and use it in GitHub Desktop.
Save lxmmxl56/3afdd36b842bf1d9300ff41b5a6fc147 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 4 Responsive Tabs to Accordion - To add more tabs/content, copy the two copy from here to here sections and change the two and Two (case sensitive) variable names to your desired names.
Raw
respTabsAcc.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
.nav-tabs-resp-acc {
display: none;
}
@media(min-width:768px) {
.nav-tabs-resp-acc {
display: flex;
}
.card-resp-acc {
border: none;
}
.card-resp-acc .card-header {
display: none;
}
.card-resp-acc .collapse {
display: block;
}
}
@media (max-width: 767.98px) {
.tab-pane-resp-acc {
display: block !important;
opacity: 1;
}
}
</style>
</head>
<body>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-resp-acc" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="one-tab" data-toggle="tab" href="#onePane" role="tab" aria-controls="one" aria-selected="true">
One Tab Title
</a>
</li>
<!-- copy from here -->
<li class="nav-item">
<a class="nav-link" id="two-tab" data-toggle="tab" href="#twoPane" role="tab" aria-controls="two" aria-selected="false">
Two Tab Title
</a>
</li>
<!-- to here -->
</ul>
<!-- Tab panes -->
<div id="accordionContent" class="tab-content" role="tablist">
<div class="tab-pane tab-pane-resp-acc active card card-resp-acc show" id="onePane" role="tabpanel" aria-labelledby="one-tab">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="card-header" role="tab" id="headingOne">
One Accordion Title
</div>
</a>
<div id="collapseOne" class="collapse show" data-parent="#accordionContent" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
One Content
</div>
</div>
</div>
<!-- copy from here -->
<div class="tab-pane tab-pane-resp-acc card card-resp-acc" id="twoPane" role="tabpanel" aria-labelledby="two-tab">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="card-header" role="tab" id="headingTwo">
Two Accordion Title
</div>
</a>
<div id="collapseTwo" class="collapse" data-parent="#accordionContent" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">
Two Content
</div>
</div>
</div>
<!-- to here -->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment