X
HTML Code

HTML Code - paste inside the body tag


<section id="section1">
<div class="coverB" id="coverB1">
<div class="btn btnB" id="btnB1">
<div class="btnX" id="btnX1">X</div>
</div>
</div>
<div class="coverT" id="coverT1">
<div class="btn btnT" id="btnT1">
<div class="btnText" id="btnText1">Button Text</div>
</div>
<div class="line" id="line1"></div>
</div>
<article id="article1">
<p>Article 1 content</p>
</article>
</section>
<section id="section2">
<div class="coverB" id="coverB2">
<div class="btn btnB" id="btnB2">
<div class="btnX" id="btnX2">X</div>
</div>
</div>
<div class="coverT" id="coverT2">
<div class="btn btnT" id="btnT2">
<div class="btnText" id="btnText2">Button Text</div>
</div>
<div class="line" id="line2"></div>
</div>
<article id="article2">
<p>Article 2 content</p>
</article>
</section>
<section id="section3">
<div class="coverB" id="coverB3">
<div class="btn btnB" id="btnB3">
<div class="btnX" id="btnX3">X</div>
</div>
</div>
<div class="coverT" id="coverT3">
<div class="btn btnT" id="btnT3">
<div class="btnText" id="btnText3">Button Text</div>
</div>
<div class="line" id="line3"></div>
</div>
<article id="article3">
<p>Article 3 content</p>
</article>
</section>
<section id="section4">
<div class="coverB" id="coverB4">
<div class="btn btnB" id="btnB4">
<div class="btnX" id="btnX4">X</div>
</div>
</div>
<div class="coverT" id="coverT4">
<div class="btn btnT" id="btnT4">
<div class="btnText" id="btnText4">Button Text</div>
</div>
<div class="line" id="line4"></div>
</div>
<article id="article4">
<p>Article 4 content</p>
</article>
</section>

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content

Article 1 content bottom

X
CSS Code

CSS


* {
box-sizing: border-box;
}
body {
margin: 0;
width: 100vw;/*vw = viewport width where viewport is the browser window and 100vh is 100% of browser width*/
height: 100vh;/*vh = viewport height*/
overflow: hidden;/*needed to avoid browser scrollbar*/
position: relative;
color: #000;
}
section {
width: 100vw;
height: 25vh;/*25vh = 25% of browser window height*/
position: relative;
overflow: hidden;/*hides the article content under buttons*/
}
.coverT, .coverB {
position: absolute;/*position taken from the top left of section div*/
left: 0;
width: 100%;
height: 50%;
z-index: 900;
background-color: #fff;
}
.line {
position: relative;
width: 0;
height: 6px;
margin: -3px auto 0 auto;
z-index: 950;
background-color: rgba(0,0,0,1.00);
border-radius: 5px;
top: calc(100% - 3px);/*nust have space around the minus sign*/
}
.coverT {
top: 0;/*allows to move with section*/
}
.coverB {
bottom: 0;/*allows to move with section*/
}
.btnT, .btnB {
width: 300px;
height: 50px;
background-color:#000;
margin: 0 auto;
position: relative;
text-align: center;
cursor: pointer;
z-index: 1001;
}
.btnT {
top: 100%;/*forces button to be below the bottom of section*/
margin-top: -50px;/*forces the button to be above the bottom of the section by set amount*/
border-top-right-radius: 150px;
border-top-left-radius: 150px;
font-size: 2.5em;
padding-top: 25px;
color: #fff;
}
.btnB {
border-bottom-right-radius: 150px;
border-bottom-left-radius: 150px;
}
.btnX {
width: 20px;
height: 20px;
background-color: rgba(67,228,11,1.00);
margin:0 auto;
position: relative;
text-align: center;
cursor: pointer;
border-radius: 10px;
z-index: 1002;
top: 14px;
}
article {
max-width: 960px;
width: 100%;
height: calc(100vh - 120px);
margin: 60px auto 0 auto;
position: relative;
z-index: 800;
padding: 10px;
overflow: auto;
}

Article 2 content

Article 2 content

Article 2 content bottom

X
Javascript

Javascript

You'll need these in the head of your HTML - check that you don't already have them


<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/transit.js"></script>

Paste this code below inside your $(document).ready(function() { }); code.


var transitionTime = 1000;
var sectionState = "collapsed", btnClicked, thisSection, thisCoverT, thisCoverB, thisBtnT, thisBtnB, thisBtnX, thisLine;
var shiftSectionAmount, btnHovered, thisLine;
var countSections = $("section").length;
var newVH = Math.round(100/countSections);
function expandNextSection(){
$(".line").css({opacity:0});
shiftSectionAmount = -newVH*(btnClicked-1)+"vh";
$("#section1").transition({//stop is for quick clicking of buttons to stop current action
marginTop: shiftSectionAmount
}, transitionTime/2);
$(thisSection).transition({
height:"100vh"
}, transitionTime);
$(thisCoverT).transition({
height:0
}, transitionTime);
$(thisCoverB).transition({
height:0
}, transitionTime);
$(thisBtnT).transition({
marginTop:0,
paddingTop:0
}, transitionTime);
$(thisBtnB).transition({
marginTop:"-50px"
}, transitionTime);
$(thisBtnX).fadeIn(transitionTime);
}
function collapsePrevSection(){
$("#section1").transition({
marginTop: 0
}, transitionTime/2);
$(thisSection).transition({
height:newVH+"vh"
}, transitionTime);
$(thisCoverT).transition({
height:"50%"
}, transitionTime);
$(thisCoverB).transition({
height:"50%"
}, transitionTime);
$(thisBtnT).transition({
marginTop:-50,
paddingTop:25
}, transitionTime);
$(thisBtnB).transition({
marginTop:0
}, transitionTime, function(){
$(".line").css({
opacity:1,
width:0
});
});
$(thisBtnX).fadeOut(transitionTime);
}
$(".btnX").fadeOut(0);
$(".btn").hover(function(){
btnHovered = $(this).attr("ID").substr(4,5);
thisLine = "#line" + btnHovered;
$(thisLine).stop().transition({
width:"90%"
}, transitionTime/8);
},function(){
$(thisLine).stop().transition({
width:0
}, transitionTime/8);
});
$(".btn").click(function(){
btnClicked = $(this).attr("ID").substr(4,5);
thisSection = "#section" + btnClicked;
thisCoverT = "#coverT" + btnClicked;
thisCoverB = "#coverB" + btnClicked;
thisBtnT = "#btnT" + btnClicked;
thisBtnB = "#btnB" + btnClicked;
thisBtnX = "#btnX" + btnClicked;
if(sectionState === "collapsed"){
expandNextSection();
sectionState = "expanded"
} else {
collapsePrevSection();
sectionState = "collapsed"
}
})

Article 3 content

Article 3 content

Article 3 content

Article 3 content

Article 3 content

Article 3 content

Article 3 content

Article 3 content

Article 3 content

Article 3 content bottom

X
Button title

Thanks for Sumukh Vase (Class of 2016) for the concept

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content middle

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content middle

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content

Article 4 content bottom