CODEWITHSUNDEEP
javascriptjquerycss
Erik
Erik

Reputation: 137

Howto slide up divs

My site has 30 questions. Every question is in a div. All divs are display: none, except the one showing. Once a question is answered I go to the next question, by setting all questions to display: none, and display: block on the div holding the next question. So far, nothing new.

On stackoverflow I recently saw a question with this fiddle. It would be marvellous if I could use that effect to slide up the answered question. Pushed up, so to say, by the next question which conveniently shifts into view.

Unfortunately, as soon as you no longer hover over the question the old question is shown again, so the effect doesn't last. I tried to make it permanent to create the feeling of a questionnaire that leterally shifts up and down before your eyes. But I failed miserably.

I have seen Bootstraps Carousel, which almost does what I want, but I do not want the questions to be images and my PHP script should be able to determine the next question. So the next question is not determined by the order I stack the questions.

Is my idea at all possible using css3, javascript and/or jQuery?

* {
    box-sizing: border-box;
}
.container {
    width: 200px;
    height: 150px;
    overflow: hidden;
    position: relative;
}
.slide {
    position: absolute;
    top: 0;
    transition: all 1s;
}
.slide:hover {
    top: -150px;
}
.content {
    width: 200px;
    height: 150px;
    padding: 10px;
}

#first {  background-color: #C00; }
#second { background-color: #0C0; }
#third { background-color: #00C; }
#fourth { background-color: #CC0; }
<div class="container">
    <div class="slide">
        <div class="content" id="first">
            Question 1
        </div>
        <div class="content" id="second">
            Question 2
        </div>
    </div>
</div>

<br />

<div class="container">
    <div class="slide">
        <div class="content" id="third">
            Question 3
        </div>
        <div class="content" id="fourth">
            Question 4
        </div>
    </div>
</div>

Upvotes: 0

Views: 116

Answers (2)

George Sun
George Sun

Reputation: 1080

As the previous answerer mentioned, the problem with your code was trying to implement using only the :hover selector. The :hover selector only applies your desired styling when hovering over the specified target.

Here's another solution that uses jQuery. Question progress is tracked using two classes, .active and .finished, and questions proceed on click. At the end of the sequence, all .active and .finished classes are removed and .active is assigned to the first question to restart the sequence.

$(function() {
    // on document ready set the first question to active
    $('.slide .content:first-child').toggleClass('active');

    // when the question box is clicked
    $('.slide .content').click(function() {
        // remove the active class from the current question and add finished class
        $(this).removeClass('active');
        $(this).addClass('finished');

        // add the active class to the following question
        $(this).next('.content').addClass('active');

        // if there are no more questions return to the first
        if ($(this).next('.content').length == 0) {
          $('.slide .content').removeClass('finished');
            $('.slide .content:first-child').toggleClass('active');
        }
    });
});
* {
    box-sizing: border-box;
}
.container {
    width: 200px;
    height: 150px;
    overflow: hidden;
    position: relative;
}
.content {
    width: 200px;
    height: 150px;
    padding: 10px;
    position: absolute;
    top: 150px; /* upcoming questions come from below */
    transition: all 1s;
}
.content.active {
    top: 0; /* current question is at top */
}
.content.finished {
    top: -150px; /* move finished questions up */
}

#first { background-color: #C00; }
#second { background-color: #0C0; }
#third { background-color: #00C; }
#fourth { background-color: #CC0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
    <div class="slide">
        <div class="content" id="first">
            Question 1
        </div>
        <div class="content" id="second">
            Question 2
        </div>
        <div class="content" id="third">
            Question 3
        </div>
        <div class="content" id="fourth">
            Question 4
        </div>
    </div>
</div>

Upvotes: 1

Calvin Nunes
Calvin Nunes

Reputation: 6501

With CSS you will be able to animate the element with the slideUp effect you want. But, you need JS to control which question are actually being displayed.

The CSS :hover says it all, when you hover the element it takes that css style and applies, when you are not hovering, those attributes are no longer active on the element.

Below, is a code that may help you to go ahead with your logic.
What I've done:

  • Removed the hover effect from CSS, to control it on JS.
  • Added a button to go to the next question (here is up to you to implement the logic you want to go to next questions...)
  • The button calls a function that increments the current question index and slides up the div based on it's height (you set to 150px), using the top attribute.

let currentQuestion = 1;
let questionsAmmount = 4;

function slideUp() {
  if (currentQuestion < questionsAmmount) {
    let slide = document.querySelector('.slide')
    slide.style.top = currentQuestion * 150 * -1 + 'px';
    currentQuestion++;
  }
}

document.getElementById("nextQuestionButton").onclick = slideUp;
* {
  box-sizing: border-box;
}

.container {
  width: 200px;
  height: 150px;
  overflow: hidden;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  transition: all 1s;
}

.content {
  width: 200px;
  height: 150px;
  padding: 10px;
}

#first {
  background-color: #C00;
}

#second {
  background-color: #0C0;
}

#third {
  background-color: #00C;
}

#fourth {
  background-color: #CC0;
}
<div class="container">
  <div class="slide">
    <div class="content" id="first">
      Question 1
    </div>
    <div class="content" id="second">
      Question 2
    </div>
    <div class="content" id="third">
      Question 3
    </div>
    <div class="content" id="fourth">
      Question 4
    </div>
  </div>
</div>

<button id="nextQuestionButton">Next></button>

Upvotes: 1

Related Questions