You can easily display your content in 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 |
<ul class="nav nav-tabs ct-u-paddingTop10" role="tablist" id="myTab"> <li role="presentation" class="ct-navbarTabs--default active"><a href="#coffee" aria-controls="coffee" role="tab" data-toggle="tab">Coffee</a></li> <li role="presentation" class="ct-navbarTabs--default"><a href="#sweets" aria-controls="sweets" role="tab" data-toggle="tab">Sweets</a></li> <li role="presentation" class="ct-navbarTabs--default"><a href="#savories" aria-controls="savories" role="tab" data-toggle="tab">Savories</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="coffee"> <p>Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et. Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit.</p> <p class="ct-u-paddingBottom20"> Cras interdum ante a efficitur dictum. Duis tincidunt non elit pellentesque. Curabitur set accumsan accumsan consectetur. Quisque et velit vestibulum quam condimentum consectetur. Praesent ac elit molestie, commodo quam vel, laoreet amet elit lacinia lobortis pellentesque metus. </p> </div> <div role="tabpanel" class="tab-pane fade" id="sweets"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur</p> <p class="ct-u-paddingBottom20"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div role="tabpanel" class="tab-pane fade" id="savories"> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.</p> <p class="ct-u-paddingBottom20"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem numquam eius modi tempora incidunt. </p> </div> </div> |