====== Creating CMS page with tabs ====== === 1. Add styles to a newly created page === Turn on the HTML view by pressing "< >" symbol in the page editor window. Then paste the following code: ---- === 2. Add tabs content === Paste the following code below:
Tab1 Contents
Tab2 Contents
Tab3 Contents
---- === 3. Add content visible through all tabs === To add visible in all tabs simply add it before or after step 2. ---- === 4. Update created content === Change content provided in step 2 as you require. You can add as much tabs as you need and name them as you want. Important part is that if you create new tabs, you need to update styles too. This can be done in part1 (styles) at the last step block. For example if you add fourth tab:
New tab content
Update style to look like: .adv-tabs #tab1:checked ~ .tab-content.content1, .adv-tabs #tab2:checked ~ .tab-content.content2, .adv-tabs #tab3:checked ~ .tab-content.content3, .adv-tabs #tab4:checked ~ .tab-content.content4 { display: block; } **IMPORTANT NOTE: id, for and content numbers should have same number** ==== Full page content demo ====
Tab1 Contents
Tab2 Contents
Tab3 Contents