The code above uses the following markup/code:

<div id="news1">
    <h2>News</h2>
    <p>Paragraph 1 of the news section</p>
    <h2>Weather</h2>
    <p>Paragraph 1 of the weather section</p>
    <p>Paragraph 2 of the weather section</p>
    <p>Paragraph 3 of the weather section</p>
    <h2>Sports</h2>
    <p>Paragraph 1 of the sports section</p>
    <h2>Entertainment</h2>
    <p>Paragraph 1 of the entertainment section</p>
    <p>Paragraph 2 of the entertainment section</p>
    <p>Paragraph 3 of the entertainment section</p>
    <p>Paragraph 4 of the entertainment section</p>
    <p>Paragraph 5 of the entertainment section</p>
</div>
<script type="text/javascript">

var tp1 = new Spry.Widget.TabbedPanels2("news1");

</script>

The code above uses the following markup/code:

<div id="news2" class="section">
	<div class=article>
		<div class=header>News</div>
		<p>Paragraph 1 of the news section</p>
	</div>
	<div class=article>
		<div class=header>Weather</div>
		<p>Paragraph 1 of the weather section</p>
		<p>Paragraph 2 of the weather section</p>
		<p>Paragraph 3 of the weather section</p>
	</div>
	<div class=article>
		<div class=header>Sports</div>
		<p>Paragraph 1 of the sports section</p>
	</div>
	<div class=article>
		<div class=header>Entertainment</div>
		<p>Paragraph 1 of the entertainment section</p>
		<p>Paragraph 2 of the entertainment section</p>
		<p>Paragraph 3 of the entertainment section</p>
		<p>Paragraph 4 of the entertainment section</p>
		<p>Paragraph 5 of the entertainment section</p>
	</div>
</div>
<script type="text/javascript">

var tp2 = new Spry.Widget.TabbedPanels2("news2", { tabSelector: ".article > .header" });

</script>

The code above uses the following markup/code:

<div id="news3" class="section">
	<div class=article>
		<div class=header>
        	<h2>News</h2>
            <h3>Brought to you by CNN</h3>
        </div>
		<p>Paragraph 1 of the news section</p>
	</div>
	<div class=article>
		<div class=header>
        	<h2>Weather</h2>
            <h3>Brought to you by the Weather Channel</h3>
        </div>
		<p>Paragraph 1 of the weather section</p>
		<p>Paragraph 2 of the weather section</p>
		<p>Paragraph 3 of the weather section</p>
	</div>
	<div class=article>
		<div class=header>
        	<h2>Sports</h2>
            <h3>Brought to you by ESPN</h3>
        </div>
		<p>Paragraph 1 of the sports section</p>
	</div>
	<div class=article>
		<div class=header>
        	<h2>Entertainment</h2>
            <h3>Brought to you by TV Guide</h3>
        </div>
		<p>Paragraph 1 of the entertainment section</p>
		<p>Paragraph 2 of the entertainment section</p>
		<p>Paragraph 3 of the entertainment section</p>
		<p>Paragraph 4 of the entertainment section</p>
		<p>Paragraph 5 of the entertainment section</p>
	</div>
</div>
<script type="text/javascript">

var tp3 = new Spry.Widget.TabbedPanels2("news3", { tabSelector: ".article > .header h2", contentDelimiterSelector: ".article > .header" });

</script>

Here's an example of a Tabbed Panels widget with its tabs at the bottom in slide show mode.

The code above uses the following markup/code:

<div id="news4">
    <h2>News</h2>
    <p>Paragraph 1 of the news section</p>
    <h2>Weather</h2>
    <p>Paragraph 1 of the weather section</p>
    <p>Paragraph 2 of the weather section</p>
    <p>Paragraph 3 of the weather section</p>
    <h2>Sports</h2>
    <p>Paragraph 1 of the sports section</p>
    <h2>Entertainment</h2>
    <p>Paragraph 1 of the entertainment section</p>
    <p>Paragraph 2 of the entertainment section</p>
    <p>Paragraph 3 of the entertainment section</p>
    <p>Paragraph 4 of the entertainment section</p>
    <p>Paragraph 5 of the entertainment section</p>
</div>
<script type="text/javascript">

var tp4 = new Spry.Widget.TabbedPanels2("news4", { tabsPosition: "bottom", autoPlay: true, displayInterval: 3000, stopOnUserAction: true });

</script>

The code above uses the following markup/code:

<div id="news5">
    <h2>News</h2>
    <p>Paragraph 1 of the news section</p>
    <h2>Weather</h2>
    <p>Paragraph 1 of the weather section</p>
    <p>Paragraph 2 of the weather section</p>
    <p>Paragraph 3 of the weather section</p>
    <h2>Sports</h2>
    <p>Paragraph 1 of the sports section</p>
    <h2>Entertainment</h2>
    <p>Paragraph 1 of the entertainment section</p>
    <p>Paragraph 2 of the entertainment section</p>
    <p>Paragraph 3 of the entertainment section</p>
    <p>Paragraph 4 of the entertainment section</p>
    <p>Paragraph 5 of the entertainment section</p>
</div>
<script type="text/javascript">

var tp5 = new Spry.Widget.TabbedPanels2("news5", { tabsPosition: "left" });

</script>