Create a tabbed content block | uConnect Knowledge Base

Tabbed content blocks are a great solution to standardize the format of your content, when you have a lot of text to add to a page or resource.

Here's an example of what a tabbed content block looks like:

By clicking on the tabs to the left, the content to the right will update with the relevant body text.

To create one of these, copy and paste the code below into the 'text' tab of your text editor if you're on the legacy editor, or into a custom HTML block if you're using the block editor:

<ul class="vertical-tabs">
 	<li><strong>Block 1</strong></li>
 	<li><strong>Block 2</strong></li>
 	<li><strong>Block 3</strong></li>
 	<li><strong>Block 4</strong></li>
 	<li><strong>Block 5</strong></li>
</ul>
<ul>
 	<li>BLOCK 1 TEXT</li>
 	<li>BLOCK 2 TEXT</li>
        <li>BLOCK 3 TEXT</li>
        <li>BLOCK 4 TEXT</li>
        <li>BLOCK 5 TEXT</li>
</ul>

Please note that if you have any trouble locating the text tab or HTML block, you can submit a support request.

You can add additional blocks by adding another line item to the top list,

<li>Block X</li>

and an additional corresponding line item to the bottom list:

<li>BLOCK X TEXT</li>

If you have questions, submit a support request and we can help format this for you!