Standard Tabs
Tabs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div role="tabpanel" class="ct-u-paddingTop20 ct-u-paddingBottom30"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#description" aria-controls="description" role="tab" data-toggle="tab">Description</a></li> <li role="presentation"><a href="#delivery" aria-controls="delivery" role="tab" data-toggle="tab">Delivery Date Estimate</a></li> <li role="presentation"><a href="#reviews" aria-controls="reviews" role="tab" data-toggle="tab">Customer Reviews</a></li> <li role="presentation"><a href="#questions" aria-controls="questions" role="tab" data-toggle="tab">Community Q&A</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="description"> <div class="adjust-text"> <div class="ct-u-paddingBottom30 ct-u-paddingTop10 ct-panelWidget"> <a href="#" class="pull-left"><i class="fa fa-fw fa-file-text-o"></i> Ring Size Guide</a> <span class="pull-right">Adjust Text Size <a href="#" class="plus">+</a><a href="#" class="minus">-</a></span> <div class="clearfix"></div> </div> <p>Bands of brilliance. Pave set with simulated diamonds, this distinctive, double band bar ring makes quite the impression on your finger.<br> Sterling Silver, 18K Rose Gold-Clad Sterling Silver, or 18K Yellow Gold-Clad Sterling Silver.<br> For more details on this ring's fit, please refer to the Ring Size Guide above. </p> <ul class="list-unstyled ct-advantageList"> <li>Sterling silver</li> <li>Total Diamonique simulated diamond weight is approximately 9/10 carat</li> <li>Pave-set, round simulated diamonds set into a polished, open, double-band bar design</li> <li>Sizes 5, 6, 7, 8, 9, 10; due to the special nature of the plating process, we don’t not recommend resizing by a jeweler</li> <li>Measures approximately 3/8"L x 3/4"W</li> <li>Imported</li> </ul> </div> </div> |
Nested Tabs
Nested tabs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
div role="tabpanel" class="tab-pane tab-pane-inner" id="questions"> <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs pull-left ct-u-marginBottom20" role="tablist"> <li role="presentation" class="active"><a href="#featured" aria-controls="featured" role="tab" data-toggle="tab">Featured Q&A</a></li> <li role="presentation"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">View All Q&A</a></li> </ul> <div class="ct-dividedTabSearch pull-right"> <form role="form" action="#"> <div class="input-group"> <input type="email" class="form-control" placeholder="Search All Questions For This Product"> <button class="btn btn-default btn-sm" type="button"><i class="fa fa-fw fa-long-arrow-right"></i></button> </div> </form> </div> <div class="clearfix"></div> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="featured"> <h5>Questions With Most Answers</h5> <div class="panel-group ct-u-marginBottom40" id="accordion2" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <span class="pull-left"><i class="fa fa-fw fa-long-arrow-right"></i> What country was it made in?</span> <span class="pull-right"><i class="fa fa-fw fa-comment"></i> 1 answer</span> <span class="clearfix"></span> </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> |