Useful Stuff About:
Vertically sliding content areas activated by buttons
Click on a button below to see demo
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);
});