I want my previous and next buttons to hide the current card and display the next one if next is clicked and hide the current one and show the previous one when previous is clicked. obvious stuff. i have looked at a lot of similar questions but the answers are all in jquery and i'm quite clueless about it as of now. i want to do this using javascript css and html only.
HTML :
<div class="cardContainer">
<div class="questionCard active" id="q1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna.
</div>
<div class="questionCard" id="q2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna.
</div>
<div class="questionCard" id="q3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna.
</div>
<div class="navCard">
<a href="#" id="prev" onclick="previous()"><img src="img/back.png" value="prev"></a>
<a href="#" id="nxt" onclick="next()"><img src="img/forward.png" value="nxt"></a>
<a href="#" ><img src="img/Facebook.png" value="fb"></a>
<a href="#" ><img src="img/Twitter.png" value="tweet"></a>
<a href="#" ><img src="img/WhatsApp.png" value="whatsapp"></a>
</div>
</div><!--end of card container-->
CSS :
.cardContainer {
position: relative;
top: 400px;
background-color: #333;
height: 100%;
box-shadow: -1px -1px 7px black;
}
.active {
display: block;
}
.questionCard {
min-width: 50%;
max-width: 60%;
margin: 0 auto;
margin-top: 20px;
top: -300px;
padding: 20px;
background-color: #1b6bb9;
color: white;
border-radius: 2px;
position: inherit;
border-color: #1167bc;
box-shadow: 1px 1px 7px black;
border: rgba(128, 128, 128, 0.35);
z-index: 1;
display: none;
}
.navCard {
max-width: 400px;
min-width: 60px;
margin: 0 auto;
border-color: #1b6bb9;
z-index: 1;
padding: 20px;
background-color: white;
border-radius: 2px;
box-shadow: 1px 1px 7px;
border: rgba(128, 128, 128, 0.35);
position: inherit;
top: -270px;
background-color: #1b6bb9;
align-content: center;
}
JS :
var qlist = document.getElementsByClassName("questionCard");
var i=1;
function previous () {
qlist[i].style.display = 'none';
qlist[i-1].style.display = 'block';
i--
}
function next () {
qlist[i].style.display = 'block';
qlist[i-1].style.display = 'none';
i++
}
qlist
.