@CamRobb as far as what @Gabriel33 mentioned regarding deprecation, that is true.  However, for right now the following may be something you can work with and adjust as needed.  I am not sure how the code will come out but I will try to post it.  This is something I have been playing around with for my courses. You should be able to post the code below into a page and see what it looks like.

Good luck

Ron

<div class="enhanceable_content accordion">
<h3><a href="#">Section 1</a></h3>
<div style="padding: 15px;">
<p>Section 1 Content</p>
<div class="enhanceable_content tabs">
<ul>
<li style="background-color: #fff53d;"><a href="#fragment-1">Tab One</a></li>
<li style="background-color: #00f5ff;"><a href="#fragment-2">Tab Two</a></li>
<li style="background-color: #22eb00;"><a href="#fragment-3">Tab Three</a></li>
</ul>
<div id="fragment-1">
<div class="enhanceable_content accordion">
<h3><a href="#">Section 1</a></h3>
<div style="padding: 15px;">
<p>Section 1 Content</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div style="padding: 15px;">
<p>Section 2 Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div style="padding: 15px;">
<p>Section 3 Content</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</div>
<div id="fragment-2">Tab 2 content</div>
<div id="fragment-3">Tab 3 content</div>
</div>
</div>
<h3><a href="#">Section 2</a></h3>
<div style="padding: 15px;">
<p>Section 2 Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div style="padding: 15px;">
<p>Section 3 Content</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div class="enhanceable_content tabs">
<ul>
<li style="background-color: #fff53d;"><a href="#fragment-1">Tab One</a></li>
<li style="background-color: #00f5ff;"><a href="#fragment-2">Tab Two</a></li>
<li style="background-color: #22eb00;"><a href="#fragment-3">Tab Three</a></li>
</ul>
<div id="fragment-1">
<div class="enhanceable_content accordion">
<h3><a href="#">Section 1</a></h3>
<div style="padding: 15px;">
<p>Section 1 Content</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div style="padding: 15px;">
<p>Section 2 Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div style="padding: 15px;">
<p>Section 3 Content</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</div>
<div id="fragment-2">Tab 2 content</div>
<div id="fragment-3">Tab 3 content</div>
</div>
<p>&nbsp;</p>