Marty Spellerberg

<div id="slides">
	<div class="slide">
		<h3>Slide 1</h3>
		<p>This is the content of slide one</p>
	</div>
	<div class="slide">
		<h3>Slide 2</h3>
		<p>This is the content of slide two</p>
	</div>
</div>

<div id="slides"> <div class="slide"> <h3>Slide 1</h3> <p>This is the content of slide one</p> </div> <div class="slide"> <h3>Slide 2</h3> <p>This is the content of slide two</p> </div> </div>

$(document).ready(function() {
 
	// Insert the wrapper for the controls
	$('#slides').before('<ul id="slidecontrols"></ul>');
 
	//For each heading...
	$('#slides div.slide > h3').each(function(){
		// Copy it into the controls
		$(this).clone().appendTo("#slidecontrols");
		// and replace the heading markup with list markup, keeping the contained text
		$('#slidecontrols h3').replaceWith('<li><a href="#">' + $(this).text() + '</a></li>');
	});
 
	// Hide those H3s
	$('.slide > h3').hide();
 
	//Set the initial state: highlight the first button...
	$('#slidecontrols').find('li:eq(0)').addClass('selected');
 
	//and hide all slides except the first one
	$('#slides').find('> div:eq(0)').nextAll().hide();
 
	//actions that apply on click of any of the buttons
	$('#slidecontrols li').click( function(event) {
 
		//turn off the link so it doesn't try to jump down the page
		event.preventDefault();
 
		//un-highlight the buttons
		$('#slidecontrols li').removeClass();
 
		//hide all the slides
		$('#slides > div').hide();
 
		//highlight the current button
		$(this).addClass('selected');
 
		//get the index of the current button...
		var index = $('#slidecontrols li').index(this);
 
		//and use that index to show the corresponding slide
		$('#slides > div:eq('+index+')').show();
 
	});
 
});

$(document).ready(function() { // Insert the wrapper for the controls $('#slides').before('<ul id="slidecontrols"></ul>'); //For each heading... $('#slides div.slide > h3').each(function(){ // Copy it into the controls $(this).clone().appendTo("#slidecontrols"); // and replace the heading markup with list markup, keeping the contained text $('#slidecontrols h3').replaceWith('<li><a href="#">' + $(this).text() + '</a></li>'); }); // Hide those H3s $('.slide > h3').hide(); //Set the initial state: highlight the first button... $('#slidecontrols').find('li:eq(0)').addClass('selected'); //and hide all slides except the first one $('#slides').find('> div:eq(0)').nextAll().hide(); //actions that apply on click of any of the buttons $('#slidecontrols li').click( function(event) { //turn off the link so it doesn't try to jump down the page event.preventDefault(); //un-highlight the buttons $('#slidecontrols li').removeClass(); //hide all the slides $('#slides > div').hide(); //highlight the current button $(this).addClass('selected'); //get the index of the current button... var index = $('#slidecontrols li').index(this); //and use that index to show the corresponding slide $('#slides > div:eq('+index+')').show(); }); });