I think a combination of two techniques will get you all the way there.
1. Shortcodes
It’s really easy to use shortcodes to wrap various content in a <div>/<span>/<section>. Take a look at the Shortcode API. Then you could take something like this:
[tabs]
[tab title="Tab 1"]The tab #1 content[/tab]
[tab title="Another Tab"]The tab #2 content[/tab]
[tabs]
And output it as:
<article class="tabs">
<section class="tab">
<h3>Tab 1</h3>
<div class="tab-content">The tab #1 content.</div>
</section>
<section class="tab">
<h3>Another Tab</h3>
<div class="tab-content">The tab #2 content.</div>
</section>
</article>
There are a lot of plugins that do this like shortcodes ultimate, but I think they tend to be rather bloated. I’d code tihs myself if it were me.
2. Custom Post Type & Taxonomy
Using shortcodes, you could extend the above patterns one step further and also have a [slide] shortcode, but I think that might start getting too convoluted.
At this point, I think it makes sense to have a “slide” custom post type and then use a “slideshow” custom taxonomy to sort each slide into one or more slideshows. You could enable the menu order field to control the slide order to set that up as a custom meta box.
I see that you’re using AnythingSlider which has a WordPress plugin that works similarly. It’s possible even that you could combine that and shortcodes ultimate to get this working with now extra work, but I can’t promise that will work.
The result
In the end, your solution’s workflow would go like this:
- Create a “Slide” post.
- Use the shortcodes to define the tabs in each slide.
- Assign the slide to a slideshow taxonomy term.
- Repeat steps 1-3 for all the remaining slides.
Then, it’s up to you to put together a template that queries the slideshow and outputs all the code you need. Alternately, maybe you make a final shortcode that places it for you like this: [slideshow cat="My first slideshow" /]