---

Create tabs

1. Place the cursor in the WYSIWYG editor window where the tabs are to be added.
2. Click the Templates icon.
3. The Content Templates pop-up window will open.
   
   1. Select Tabs - horizontal or select Tabs - vertical. The tabbed layout, including four tabs, will automatically be inserted into the page.
   2. (Optional) Select Replace actual contents ONLY if all the pre-existing content on the page should disappear. This option is useful if you accidentally selected the wrong template and you need to replace it.
4. Double click the First link to replace the text that will appear on the first tab.
5. Replace the heading First and the text that appears in the paragraph beneath it. This will be visible only when the first tab is selected.

   Example of horizontal tabs:

   

   Example of vertical tabs:

   
   

6. Repeat this step for each included tab, as desired. If any tabs are not required, delete the unused ones.
7. Save or Preview the page.

---

Add a tab

To create additional tabs, edit the HTML code by clicking on Source in the WYSIWYG editor. For example, if a Tabs - horizontal template has just been inserted, the following code will be seen:

<div class="tabs horizontal">
   <ul class="tab-nav">
       <li><a href="#">First</a></li>
       <li><a href="#">Second</a></li>
       <li><a href="#">Third</a></li>
       <li><a href="#">Fourth</a></li>
   </ul>

   <div>
       <h2>First</h2>

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div>
       <h2>Second</h2>

       <p>Integer condimentum, purus vitae bibendum faucibus, lorem lectus accumsan dolor, vitae convallis velit leo eu arcu. Maecenas dui elit, convallis auctor sollicitudin et, mollis id nibh. Vestibulum sodales magna ut mauris tincidunt tempor. Donec imperdiet risus eu diam vulputate aliquet. Nunc sit amet ligula non lacus vulputate aliquet. </p>
   </div>

   <div>
       <h2>Third</h2>

       <p>Aenean sapien massa, consectetur nec pretium sed, blandit in orci. Cras imperdiet egestas urna, sagittis euismod leo accumsan nec. Nullam vitae quam sit amet enim feugiat dictum. Ut gravida nisi at metus luctus condimentum elementum elit lobortis. Vestibulum elit ante, dictum on ullamcorper nec, malesuada tempus purus. </p>
   </div>

   <div>
       <h2>Fourth</h2>

       <p>Nullam vitae quam sit amet enim feugiat dictum. Ut gravida nisi at metus luctus condimentum elementum elit lobortis. Vestibulum elit ante, dictum on ullamcorper nec, malesuada tempus purus. Suspendisse rhoncus eleifend dui quis venenatis. Proin faucibus massa sit amet urna sagittis condimentum. Praesent in justo arcu. Ut quis ligula enim, tristique tristique mi. Sed ut ipsum neque, vitae auctor quam. Praesent et mi nisl, eu ultricies erat.</p>
   </div>
</div> 

Looking at the HTML code, notice:

• <div class="tabs">...</div> is the container.
• <ul class="tab-nav">...</ul> is the tab navigation.
• Tab content is contained between the <div><h2>Heading text</h2>...</div> tags.

To add a new tab:

1. Copy the last list item from the "tab-nav" list:
   

   <li><a href="#">Fourth</a></li>

2. Paste it as a separate line and change the text to something appropriate, e.g., "Fifth":
   

   <li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>

3. Then paste the following code before the very last </div> tag to create a new tab:
   

   <div>
   <h2>Fifth</h2>
   <p>Sample text</p>
</div>

4. Repeat steps 1, 2, and 3 for every additional tab to be added.
5. Click Source to return to the WYSIWYG view.
6. Save and View draft to verify if the tab has been added correctly.

---

Delete a tab

The recommended method for deleting a tab is to do so via the HTML source. Removing tab content via the WYSIWYG editor could inadvertently remove other tabs.

1. In <ul class="tab-nav"> select the list item that to be removed.
   
   • Ensure that everything is selected from the opening <li> tag to the closing </li> tag and delete the selection (including the <li> tags themselves).
2. Find the <div> that pertains to the tab content to be removed.
   
   • Ensure that everything is selected from the opening <div> tag to the closing </div> tag and delete the selection (including the  <div> tags themselves).
3. Save and View draft to verify if the tab has been deleted.

---

Add content before/after tabs

Once a page contains tabs, it can be tricky to add content before or after the tabs: content has to be added outside the <div> section containing the tabs, but the exact position of those <div> tags is not obvious in the WYSIWYG view. To add content before or after tabs, use the HTML view in the WYSIWYG editor.

The instructions below provide general guidelines for adding content before or after tabs:

1. In the Source view, locate the <div> section that contains the tabs around which content is to be added.
2. To add content before the tabs, place the cursor before the opening <div> tag.
3. To add content after the tabs, place the cursor after the closing </div> tag.
4. Enter the new content in the HTML code.
5. Once some new content has been entered in the HTML view, it is safe to switch back to the WYSIWYG view to add further content.

---