Slide effect on appearing and disappearing of accordion content

Question

I created this very simple accordion. Everything works pretty well except when I am testing it on mobile. When there is a change in which content is visible there is this 'awkward jump' between the different elements. Also for some reason when I try to add the jQuery slideDown method it doesn't work so everything is jumping from section to section and it just feels awkward. Here is the code:

$(".container-out").click(function(){
    $(".container-content").removeClass("active").eq($(this).index()).addClass("active");
});

.container-content {
    display: none;
}

.active {
    display: block;
}

h2 {
    padding: 20px;
    background: black;
    color: white;
}

    <div class="container-out">
      <div class="container-link">
          <h2>ONE</h2>
      </div>
      <div class="container-content active">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
      </div>
    </div>
    <div class="container-out">
      <div class="container-link">
          <h2>TWO</h2>
      </div>
      <div class="container-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
      </div>
    </div>
    <div class="container-out">
      <div class="container-link">
          <h2>THREE</h2>
      </div>
      <div class="container-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
      </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>

Any suggestions are greatly appreciated!

Answer 1

Working example based on your code with slideDown.

$(".container-link").click(function(){
  
  var $targetPanel = $(this).nextAll('.container-content');
  
  if(!$targetPanel.hasClass('active')){
    $('.container-content.active').removeClass('active').slideUp();
    $targetPanel.addClass('active').slideDown();
  }
  
});

.container-content {
    display: none;
}

.active {
   
}

h2 {
    padding: 20px;
    background: black;
    color: white;
}

 <div class="container-out">
      <div class="container-link">
          <h2>ONE</h2>
      </div>
      <div class="container-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
      </div>
    </div>
    <div class="container-out">
      <div class="container-link">
          <h2>TWO</h2>
      </div>
      <div class="container-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
      </div>
    </div>
    <div class="container-out">
      <div class="container-link">
          <h2>THREE</h2>
      </div>
      <div class="container-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Lobortis scelerisque fermentum dui faucibus in ornare quam. Eget lorem dolor sed viverra ipsum nunc. At erat pellentesque adipiscing commodo elit. Viverra nam libero justo laoreet. Leo duis ut diam quam nulla porttitor. Euismod nisi porta lorem mollis aliquam ut. Aliquam etiam erat velit scelerisque in. Nibh cras pulvinar mattis nunc sed blandit libero. Massa tincidunt dui ut ornare lectus sit amet est placerat. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Porta nibh venenatis cras sed felis eget.
      </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>