In this example we will use Tabber script, but you can use any other script line this. Download Tabber script here.
You need to unpack tabber.zip file, there are 2 files we need inside: "example.css" and "tabber-minimized.js", use FTP client to upload these files to your main directory.
Go to your Admin Area, click on subpage where tabs will be, example "Home".
Click on top of content, then click "paste code" icon - somewhere in the right side. New window will appear.
Create code, name it "tabber" and paste this code:
<script type="text/javascript" src="tabber-minimized.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
Submit chabges, window will close and this tag will appear: {%paste_tabber%}
Tabber script works inside <div> tags, so you need to go to HTML code now - first icon from right, new window will appear with some HTML code. Just add this code there and submit:
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
When you submit, HTML code window will close, and your page will be updated. You will not see tabs in edit mode - just tab header and content - just edit "Tab 1", "Tab 2", "Tab 3" with your own headers, and "Tab 1 content.", "Tab 2 content.", "Tab 3 content." with your own content.