Bootstrap accordions and tabbed nav in one page? -
i have site i'm building , want have tab nav different accordion things on each tab. i've done this; 1 tab i've placed in copies on other tabs.
i want each tab has different set of accordion links load different things per tab.
is possible?
(edit): here's have far:
the html:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>beerwinefoodmixer</title> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/styles.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <img src="assets/img/bws-logo.png" class="logo"/> <div class="navbar-header"> </div> </div> </nav> <div class="clearfix"></div> <figure class="figtail"><img src="assets/img/cocktail.png" class="cocktail"/></figure> <p class="rwmatch">there many cocktail varieties, depending on base spirit can blend many different flavours. click through tabs below discover can create simple ingredients.</p> <ul class="nav nav-tabs"> <li><a href="#tab-1" role="tab" data-toggle="tab">scotch based</a></li> <li><a href="#tab-2" role="tab" data-toggle="tab">rum based</a></li> <li><a href="#tab-3" role="tab" data-toggle="tab">vodka based</a></li> <li><a href="#tab-4" role="tab" data-toggle="tab">bourbon based</a></li> <li><a href="#tab-5" role="tab" data-toggle="tab">gin based</a></li> </ul> <br><br> <div class="tab-content"> <div class="tab-pane" role="tabpanel" id="tab-1"> <p>recipes scotch go here.</p> </div> <div class="tab-pane" role="tabpanel" id="tab-2"> <div class="rumtab"> <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1"> <!--panel 1--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-1">bacardi cocktail:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse in item-1"> <div class="panel-body"> <span>50ml bacardi rum<br />25ml lime juice<br />10ml grenadine<br />shake hard , fine strain<br /> </span> </div> </div> </div> <!--panel 1--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2">between sheets:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-2"> <div class="panel-body"> <span>25ml white rum<br />25ml cognac<br />25ml cointreau<br />5ml gomme<br />lemon twist<br />shake hard , fine strain<br /> </span> </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3">daiquiri:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-3"> <div class="panel-body"> <span>50ml rum<br />25ml lime juice<br />15ml sugar syrup<br />shake hard , fine strain<br /> </span> </div> </div> </div> </div> <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-2"> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-1">dark n stormy:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse in item-1"> <div class="panel-body"> <span>50ml black rum<br />25ml lime juice<br />top ginger beer<br />lime wedge<br />build in glass<br /> </span> </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-2">el floridita no.1:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-2"> <div class="panel-body"> <span>50ml rum<br />25ml lime juice<br />10ml gomme<br />10ml maraschino liqueur<br />shake hard , fine strain<br /> </span> </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-3">el presidente:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-3"> <div class="panel-body"> <span>50ml white rum 25ml<br />pineapple juice<br />20ml lime juice<br />10ml grenadine<br />lime wedge<br />shake hard , fine strain<br /> </span> </div> </div> </div> </div> </div> </div> <div class="tab-pane" role="tabpanel" id="tab-3"> <p>recipes vodka go here</p> </div> <div class="tab-pane" role="tabpanel" id="tab-4"> <p>recipes bourbon go here</p> </div> <div class="tab-pane" role="tabpanel" id="tab-5"> <p>recipes gin go here</p> </div> </div> <div class="clearfix"></div> <div class="clearfix"></div> <br /> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav"> <li role="presentation"><a href="index.html"><i class="glyphicon glyphicon-home"></i></a></li> <li role="presentation"><a href="redwine.html">red wine</a></li> <li role="presentation"><a href="whitewine.html">white wine</a></li> <li role="presentation"><a href="beer.html">craft beer</a></li> <li role="presentation"><a href="whitemeat.html">white meat</a></li> <li role="presentation"><a href="redmeat.html">red meat</a></li> <li role="presentation"><a href="dessert.html">dessert</a></li> </ul> </div> </div> </nav> <script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> </body> </html> the css:
nav.navbar.navbar-default{ background-color:#ed7228; color:black; text-align: center; } nav.navbar.navbar-default-1{ background-color:#ed7228; color:black; text-align: center; } div.navbar-header{ display: inline-block; } ul.nav.navbar-nav a{ color:#000 } ul.nav.navbar-nav{ background-color: #ed7228; display:inline-block; text-align: center; } img.logo{ display:flex; margin:auto; height:100px; } div.row{ text-align:center; background-color:#ed7228; color:#fff; } h1.menu{ background-color:#000; } div#center.col-md-4{ margin-left:auto; margin-right:auto; } div#bottom-row.row{ } img.cocktail{ height:150px; } div#bottom.row{ background-color:white; } img.steak{ height:150px; } img.chicken{ height:150px; } img.dessert{ height:150px; } img.redwine{ height:150px; } img.whitewine{ height:150px; } img.beer{ height:150px; } figure.figred{ margin-left: 150px; width:150px; display:inline-block; } figure.figwhite{ margin: auto; height:150px; width:150px; display:inline-block; } figure.figbeer{ margin-right: 150px; align:right; display:inline-block; } figure.figchick{ display:inline-block; margin:auto; } figure.figsteak{ display:inline-block; margin:auto; } figure.figdess{ display:inline-block; margin-left: auto; } figure.figtail{ display:inline-block; margin: auto; } h4.bws{ text-align:center; } div.navbar-header{ text-align:center; } article.rwmatch{ display:flex; flex-wrap:wrap; height:100px; } div.col-md-4{ display:initial; width:500px; height:150px; } p{ display:inline-block; } p.rwmatch{ display: inline-block; width:400px; text-align:justify; } figure.figwhite_1{ width:100px; margin-right:75px; margin-left:55px; display:inline-block; } p.wwmatch{ width:400px; text-align:justify; } figure.beer{ display:inline-block; } div.imagebox { display: flex; flex-wrap: wrap; justify-content: space-between; } p.sectionlink{ margin: auto; display:inline-block; } div.sectionlink-1{ display: flex; flex-wrap: wrap; } div.rumtab{ display:flex; flex-wrap: wrap; }
replace whole html following, didn't close </div> properly.
try this:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>beerwinefoodmixer</title> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/styles.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <img src="assets/img/bws-logo.png" class="logo"/> <div class="navbar-header"> </div> </div> </nav> <div class="clearfix"></div> <figure class="figtail"><img src="assets/img/cocktail.png" class="cocktail"/></figure> <p class="rwmatch">there many cocktail varieties, depending on base spirit can blend many different flavours. click through tabs below discover can create simple ingredients.</p> <ul class="nav nav-tabs"> <li><a href="#tab-1" role="tab" data-toggle="tab">scotch based</a></li> <li><a href="#tab-2" role="tab" data-toggle="tab">rum based</a></li> <li><a href="#tab-3" role="tab" data-toggle="tab">vodka based</a></li> <li><a href="#tab-4" role="tab" data-toggle="tab">bourbon based</a></li> <li><a href="#tab-5" role="tab" data-toggle="tab">gin based</a></li> </ul> <br><br> <div class="tab-content"> <div class="tab-pane" role="tabpanel" id="tab-1"> <p>recipes scotch go here.</p> </div> <div class="tab-pane" role="tabpanel" id="tab-2"> <div class="rumtab"> <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1"> <!--panel 1--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-1">bacardi cocktail:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse in item-1"> <div class="panel-body"> <span>50ml bacardi rum<br />25ml lime juice<br />10ml grenadine<br />shake hard , fine strain<br /> </span> </div> </div> </div> <!--panel 2--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-2">between sheets:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-2"> <div class="panel-body"> <span>25ml white rum<br />25ml cognac<br />25ml cointreau<br />5ml gomme<br />lemon twist<br />shake hard , fine strain<br /> </span> </div> </div> </div> <!--panel 3--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="false" href="#accordion-1 .item-3">daiquiri:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-3"> <div class="panel-body"> <span>50ml rum<br />25ml lime juice<br />15ml sugar syrup<br />shake hard , fine strain<br /> </span> </div> </div> </div> </div> <div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-2"> <!--panel 1--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-1">dark n stormy:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse in item-1"> <div class="panel-body"> <span>50ml black rum<br />25ml lime juice<br />top ginger beer<br />lime wedge<br />build in glass<br /> </span> </div> </div> </div> <!--panel 2--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-2">el floridita no.1:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-2"> <div class="panel-body"> <span>50ml rum<br />25ml lime juice<br />10ml gomme<br />10ml maraschino liqueur<br />shake hard , fine strain<br /> </span> </div> </div> </div> <!--panel 3--> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion-2" aria-expanded="false" href="#accordion-2 .item-3">el presidente:</a> </h4> </div> <div role="tabpanel" class="panel-collapse collapse item-3"> <div class="panel-body"> <span>50ml white rum 25ml<br />pineapple juice<br />20ml lime juice<br />10ml grenadine<br />lime wedge<br />shake hard , fine strain<br /> </span> </div> </div> </div> </div> </div> </div> <div class="tab-pane" role="tabpanel" id="tab-3"> <p>recipes vodka go here</p> </div> <div class="tab-pane" role="tabpanel" id="tab-4"> <p>recipes bourbon go here</p> </div> <div class="tab-pane" role="tabpanel" id="tab-5"> <p>recipes gin go here</p> </div> </div> <div class="clearfix"></div> <div class="clearfix"></div> <br /> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav"> <li role="presentation"><a href="index.html"><i class="glyphicon glyphicon-home"></i></a></li> <li role="presentation"><a href="redwine.html">red wine</a></li> <li role="presentation"><a href="whitewine.html">white wine</a></li> <li role="presentation"><a href="beer.html">craft beer</a></li> <li role="presentation"><a href="whitemeat.html">white meat</a></li> <li role="presentation"><a href="redmeat.html">red meat</a></li> <li role="presentation"><a href="dessert.html">dessert</a></li> </ul> </div> </div> </nav> <script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> </body> </html>
Comments
Post a Comment