Simple HTML content fade in with JQuery

JQuery in the Head

<script>
 $( document ).ready(function() {

 		$('#firstbody').animate({opacity:'toggle'}, 1000).is(':visible');


		$('#first, #second, #third, #fourth, #five, #six, #seven').on('click', function(){
		    var el = $('#'+this.id+'body');
		    if ( el.is(':visible') ) return false;
		    el.animate({opacity:'toggle'},1000)
		    $('#firstbody, #secondbody, #thirdbody, #fourthbody, #fivebody, #sixbody, #sevenbody').not(el).hide();
		});

});

</script>

Links in HTML

			<a href="#first" id="first">About </a> 
			<a href="#second" id="second"> Pledge</a>
			<a id="third" href="#third"> Talking Points</a>
			

CSS to hide content

 .contentHide {
 	display: none; 
 }

Page Content

<div id="firstbody" class="contentHide">
			 	
				<h1>THE BLITZ?</h1>

				Does it seem like everyone is talking about the Blitz? Do you find yourself wondering what is the Blitz, and why is it important? Let's walk through the basics:
</div>
<div id="secondbody" class="contentHide">

			<h1>START YOUR PLEDGE</h1>

			Thank you for your commitment to the 2015 Fall Enrollment Blitz. Fill out and submit the pledge form below, and to show our appreciation, you will be entered in a series of random drawings for some amazing prizes throughout the Blitz campaign.<br><br>
</div>
<div id="thirdbody"  class="contentHide">
			<h1>START TALKING</h1>


			Do you want to share the KCTCS story, but don't know how to start the conversation? Try some of these talking points, and remember, higher education begins here.
</div>

Resource

http://jsfiddle.net/gMha8/16/
http://stackoverflow.com/questions/23935491/fade-in-and-fade-out-javascript-function-for-all-the-content-div-on-main-page-o?rq=1

You may also like...