Skip to main content

Submenu Example: Tabs

enter content here for section 1

enter content here for section 2

enter content here for section 3

Tabs Code

To utilize tabs on your page, paste the following code into the page while in the code editor view.

To switch to the code editor view, open your page, click on the three dots at the top right of the page editor, click “Code Editor” under the Editor section of the menu that pops up.

Replace the tab titles and content with your own content.

<!-- wp:html -->
<div class="tabswrap">
 <ul class="tabs">
 <li><a href="#section1">Tabs 1</a></li>
 <li><a href="#section2">Tabs 2</a></li>
 <li><a href="#section3">Tabs 3</a></li>
 </ul>
<div id="section1">
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>enter content here for section 1</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
</div>
<div id="section2">
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>enter content here for section 2</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
</div>
<div id="section3">
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>enter content here for section 3</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
</div>
</div>
<!-- /wp:html -->

When you paste the code into the Code Editor view then switch back over to the Visual Editor view, it should look like this:

To edit the names of the tabs, click “Convert to HTML” on the first block where you see Tabs 1, Tabs 2, and Tabs 3. Once it is converted to HTML, you can replace the titles with your desired title for each section.


Have any questions or issues? Reach out to your content owner, submit a MyTechHelp ticket or contact the University’s WordPress trainer Brittni Favorite at bfavorite@georgiasouthern.edu.

Last updated: 9/20/2019