1

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++
}
2
  • Whats the problem? The code works fine other than there is no error handling when you go beyond the length of qlist. Commented Mar 10, 2016 at 15:22
  • I need help with error handling Commented Mar 10, 2016 at 19:49

1 Answer 1

0

OK, now that I understand you are having trouble handling errors lets work on that. To handle things not getting an error on the ends you just need to watch for those cases. Here is a very quick example.

Fiddle: https://jsfiddle.net/6karx4v0/1/

HTML: (I changed the ids to start at zero since it makes things easier when they are zero based)

<div class="cardContainer">
    <div class="questionCard active" id="q0">
        q0
    </div>
    <div class="questionCard" id="q1">
        q1
    </div>
    <div class="questionCard" id="q2">
        q2
    </div>
    <div class="questionCard" id="q3">
        q3
    </div>
    <div class="navCard">
        <a href="#" id="prev" onclick="previous()">prev</a>
        <a href="#" id="nxt" onclick="next()">next</a>
    </div>
</div>

JS:

// Find all question cards
var qlist = document.getElementsByClassName("questionCard");
// Track current index
var i = 0;
// Track length of questions
var length = list.length;

function previous () {
    // If i is 0 we are back at start so don't do anything
    if (i == 0) {
        alert('done');
        return;
    }
    // Since we add at end of next we subtract at start of pre
    i--
    // Hide current
    qlist[i].style.display = 'none';
    // If i is 0 don't display previous since it doesn't exist
    if (i != 0) {
        qlist[i - 1].style.display = 'block';
    }
}

function  next () {
    // If i is length we are at end so don't do anything
    if (i == length) {
        alert('done');
        return;
    }
    // Show current
    qlist[i].style.display = 'block';
    // if i is 0 don't try to hide previous since it doesn't exist
    if (i != 0) {
        qlist[i-1].style.display = 'none';
    }
    // Add one to i
    i++
}

Let me know if comments make sense or feel free to ask more.

3
  • Thank you very much. This helps Commented Mar 10, 2016 at 20:18
  • No problem, actually just updated answer as there was an issue with the code. Should be good now. Commented Mar 10, 2016 at 20:20
  • I'll run it when i get to my computer. But it seems right and makes sense. Commented Mar 10, 2016 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.