Useful Stuff About:

Vertically sliding content areas activated by buttons

Click on a button below to see demo

article 1 content

article 2 content

article 3 content

article 4 content

article 5 content

Scripts needed (copy and paste inside <head>) - you won't need these if you are already using the HTML5 Starter Code


  
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="path_to_javascript_file.js"></script><!--adjust this as needed-->

Here's the html code


    
<nav>
    <div class="btn" id="btn1">button1</div>
    <div class="btn" id="btn2">button2</div>
    <div class="btn" id="btn3">button3</div>
    <div class="btn" id="btn4">button4</div>
    <div class="btn" id="btn5">button5</div>
</nav>
<section id="allArticles">
    <div id="allArticlesWrapper">
      <article id="article1">article 1 content</article>
      <article id="article2">article 2 content</article>
      <article id="article3">article 3 content</article>
      <article id="article4">article 4 content</article>
      <article id="article5">article 5 content</article>
    </div>
</section>

Here's the CSS


    
#allArticles {
	height: 600px;
	width: 980px;
	overflow: hidden;/*Necessary to hide non-visible articles*/
	position: relative;
}
#allArticlesWrapper {
	position: absolute;
	z-index: 100;
	height: 3000px;/*total height of all individual articles including padding and margin*/
	width: 980px;
	left: 0px;
	top: 0px;
}
article {
	margin: 10px;
	height: 580px;
	width: 960px;
	position: relative;
}

Here's the javascript code


    
   //declare all global variables
   var btnClicked, articleNumber, newY, shiftTime, articleHeight, easingMethod;
	
   //set initial values for some variables
   shiftTime=1000;//time in milliseconds to shift to new positions
   easingMethod="easeInOutQuint";//type of easing - for options, see https://jqueryui.com/resources/demos/effect/easing.html    

   articleHeight=$("#allArticlesWrapper article").outerHeight(true);//gets the height of a single article including padding and margin?
   //actions when any class="btn" is clicked
   $(".btn").click(function(){
	   btnClicked=$(this).attr("ID");//gets the id of the clicked button
	   articleNumber=btnClicked.substring(3,5);//extracts the button number, i.e. btn1 becomes 1
	   newY=-articleHeight*(articleNumber-1);//value for new y position based on articleNumber value
	   $("#allArticlesWrapper").stop().animate({//animates the div id="allArticlesWrapper"
	   	"top":newY//sets new position of div id="allArticlesWrapper"
	   },shiftTime, easingMethod);
   });