Show pageOld revisionsBacklinksExport to PDFBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== 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: <code> <style> #cms-page .full-page .page-header { display: none; } .adv-tabs { margin-top: 25px; margin-bottom: 25px; } .adv-tabs .tab-input { display: none; } .adv-tabs .tab-input+.tab-label { display: inline-block; padding: 10px 20px; cursor: pointer; user-select: none; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-right: 10px; font-size: 14px; text-transform: capitalize; } .adv-tabs .tab-input~.tab-content { display: none; } .adv-tabs .tab-input:checked + .tab-label, .adv-tabs .tab-label:hover { background: var(--main-primary); color: var(--main-primary-text); border-bottom: 1px solid var(--main-primary); margin-bottom: -1px; } .adv-tabs .tab-content { padding-top: 20px; border-top: 1px solid var(--main-third-background); } @media screen and (max-width: 700px) { .adv-tabs { margin-top: 15px; margin-bottom: 15px; } .adv-tabs .tab-input+.tab-label { padding: 5px 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-right: 3px; } .adv-tabs .tab-content { padding-top: 10px; } } /* show contents only for selected tab */ .adv-tabs #tab1:checked ~ .tab-content.content1, .adv-tabs #tab2:checked ~ .tab-content.content2, .adv-tabs #tab3:checked ~ .tab-content.content3 { display: block; } </style> </code> ---- === 2. Add tabs content === Paste the following code below: <code> <div class="adv-tabs"> <input type="radio" name="tabs" id="tab1" class="tab-input" checked=""> <label class="tab-label" for="tab1" id="first-tab">Tab1</label> <input type="radio" name="tabs" id="tab2" class="tab-input"> <label class="tab-label" for="tab2">Tab2</label> <input type="radio" name="tabs" id="tab3" class="tab-input"> <label class="tab-label" for="tab3">Tab3</label> <div class="tab-content content1">Tab1 Contents</div> <div class="tab-content content2">Tab2 Contents</div> <div class="tab-content content3">Tab3 Contents</div> </div> </code> ---- === 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: <code> <input type="radio" name="tabs" id="tab4" class="tab-input"> <label class="tab-label" for="tab4">New tab</label> <div class="tab-content content4">New tab content</div> </code> Update style to look like: <code> .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; } </code> **IMPORTANT NOTE: id, for and content numbers should have same number** ==== Full page content demo ==== <code> <style> #cms-page .full-page .page-header { display: none; } .adv-tabs { margin-top: 25px; margin-bottom: 25px; } .adv-tabs .tab-input { display: none; } .adv-tabs .tab-input+.tab-label { display: inline-block; padding: 10px 20px; cursor: pointer; user-select: none; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-right: 10px; font-size: 14px; text-transform: capitalize; } .adv-tabs .tab-input~.tab-content { display: none; } .adv-tabs .tab-input:checked + .tab-label, .adv-tabs .tab-label:hover { background: var(--main-primary); color: var(--main-primary-text); border-bottom: 1px solid var(--main-primary); margin-bottom: -1px; } .adv-tabs .tab-content { padding-top: 20px; border-top: 1px solid var(--main-third-background); } @media screen and (max-width: 700px) { .adv-tabs { margin-top: 15px; margin-bottom: 15px; } .adv-tabs .tab-input+.tab-label { padding: 5px 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-right: 3px; } .adv-tabs .tab-content { padding-top: 10px; } } /* show contents only for selected tab */ .adv-tabs #tab1:checked ~ .tab-content.content1, .adv-tabs #tab2:checked ~ .tab-content.content2, .adv-tabs #tab3:checked ~ .tab-content.content3 { display: block; } </style> <div class="adv-tabs"> <input type="radio" name="tabs" id="tab1" class="tab-input" checked=""> <label class="tab-label" for="tab1" id="first-tab">Tab1</label> <input type="radio" name="tabs" id="tab2" class="tab-input"> <label class="tab-label" for="tab2">Tab2</label> <input type="radio" name="tabs" id="tab3" class="tab-input"> <label class="tab-label" for="tab3">Tab3</label> <div class="tab-content content1">Tab1 Contents</div> <div class="tab-content content2">Tab2 Contents</div> <div class="tab-content content3">Tab3 Contents</div> </div> </code> admin/online-platform-cms/tabs.txt Last modified: 2021/06/30 06:18(external edit)