How to make the screen follow the Slidetoggle

Question

I have a list of question/answers divs: When I open an answer by clicking a question, all other answers close.

<div class="question">
  QUESTION 1
</div>

<div class="answer">
  ANSWER 1
</div>

<div class="question">
  QUESTION 2
</div>

<div class="answer">
  ANSWER 2
</div>

(etc.)

For that, I use a javascript code found on Stackoverflow, which works great:

$(document).ready(function() {
  var $answers = $('.answer');
  $(".question").click(function() {
    var $ans = $(this).next(".answer").stop(true).slideToggle(500);
    $answers.not($ans).filter(':visible').stop(true).slideUp();
  })
});

My problem: If one of the opened answers (let'say the answer 2) is really long, with a very big height, when I click on the next question (the question 3), all the divs will go up (following the SlideUp of answer 2), and the screen won't follow them. And the answer I want (the answer 3) will not be visible, I have to scroll up to see it.

Here is an exemple (question 2 is the long answer) : https://jsfiddle.net/TB54/1dgchwyw/1/

Is there any way to make the screen to slideUp with the answer which just has been closed? Or at least to make the screen to scroll to the clicked question?

Answer 1

Your code can work fine if you set a min and max-height, and just set the overflow to auto. Scrolling through a long answer can be a pain at the best of times, so if an answer is very long, probably better to let it scroll within the div, then it doesn't immediately appear so long (and maybe daunting!)

Check out the fiddle https://jsfiddle.net/769ohszw/

(I set the min-height to 20vh, max to 30vh and overflow to auto)

Answer 2

A friend proposed me a JQuery solution to make the screen scroll to the clicked question.

Here's the full new code (in this example, the class of the question is ".exchange_question", and the class of the answers is ".exchange_answer") :

$(document).ready(function() {

  /*
   * DURATION ANIM
   */
  var SlideOfTheText = 500;
  var ScrollToTheQuestion = 500;

  // target the questions and answers
  var question = $('.exchange_question');
  var answer = $('.exchange_answer');

  // hide the loaded content
  answer.hide();

  // handler 
  $(question).on('click', clickHandler.bind(this));

  // fn click
  function clickHandler(event) {
    var currentQuestion = event.currentTarget;
    var currentAnswer = $(currentQuestion).next();

    // at click, we first hide all
    hiddenAnswer(answer);

    // if the clicked div is hidden
    if (currentAnswer.css('display') == 'none') {
      showAnswer(currentAnswer, currentQuestion);
      //if not, we hide it
    } else {
      hiddenAnswer(currentAnswer);
    }
  }

  // fn show
  function showAnswer(currentAnswer, currentQuestion) {
    // we make them all slide up
    $(currentAnswer).slideDown(SlideOfTheText, function() {

      $('html, body').animate({
        scrollTop: $(currentAnswer).offset().top - $(currentQuestion).height() - 50
      }, ScrollToTheQuestion);

    });
  }

  // fn hide
  function hiddenAnswer(currentAnswer) {
    // we make them all slide up
    $(currentAnswer).slideUp();
  }

});

Exemple here

It's not perfect (it doesn't happen at the same time : first the question opens, then the screen follows...), and it needs to be soften with a little easeInOut, but it works !