How to make div fade out and fade in without effecting parent container height

Issue

I have a tabbed section which showcases 1 .section__content area based on what tab is clicked.

In my demo below, I have used fadeTo( "slow", 1 ) instead of fadeOut(), so that the parent div isn't always resizing after tab change. However, if I click on tab-2 it'll render below where tab-1 would be (because the opacity is 0, but block height is still there). But, if I do display: none, the fade effects are not fluent.

$(function() {

  $(".section__label:first").addClass("active");
  $(".section__content:first").fadeIn();

  $('.section__label').click(function() {

    var id = $(this).attr('data-item');

    $(".section__label").removeClass("active");
    $(this).addClass("active");

    $(".section__content").fadeTo( "slow", 0 );
    $(".section__content[data-item='"+id+"']").fadeTo( "slow", 1 );

  });


});

.section {
  background: lightblue;
  padding: 100px 0;
  border: 1px solid black;
}
.section__tabs {
  display: flex;
  flex-direction: column;
}
.section__label {
  cursor: pointer;
  display: inline-block;
}
.section__label.active {
  color: orange;
}
.section__content {
  display: none;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">


<div class="section">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-3">
        <div class="section__tabs">
          <span class="section__label" data-item="tab-1">Tab 1</span>
          <span class="section__label" data-item="tab-2">Tab 2</span>
          <span class="section__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-7">
        <div class="section__content" data-item="tab-1">
          <p>Text for tab 1</p>
        </div>
        <div class="section__content" data-item="tab-2">
          <p>Text for tab 2</p>
        </div>
        <div class="section__content" data-item="tab-3">
          <p>Text for tab 3</p>
        </div>
      </div>

    </div>
  </div>
</div>

Solution

Here's a way to do that using fadeIn() and fadeOut(). I also added in a locking mechanism to prevent the UI from getting over-clicked.

https://api.jquery.com/fadein/

let locked = false;
$(function() {


  $(".section__label:first").addClass("active");
  $(".section__content:first").addClass("active");

  $('.section__label').click(function() {
    if (locked) return;
    locked = true;
    var id = $(this).attr('data-item');

    $(".section__label").removeClass("active");
    $(this).addClass("active");

    $(".section__content.active").fadeOut(500, function() {
      $(this).removeClass("active");
      $(".section__content[data-item='" + id + "']").addClass('active').fadeIn(1000, function() {
        locked = false;
      })
    });

  });


});

.section {
  background: lightblue;
  padding: 100px 0;
  border: 1px solid black;
}

.section__tabs {
  display: flex;
  flex-direction: column;
}

.section__label {
  cursor: pointer;
  display: inline-block;
}

.section__label.active {
  color: orange;
}

.section__content {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">


<div class="section">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-3">
        <div class="section__tabs">
          <span class="section__label" data-item="tab-1">Tab 1</span>
          <span class="section__label" data-item="tab-2">Tab 2</span>
          <span class="section__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-7">
        <div class="section__content" data-item="tab-1">
          <p>Text for tab 1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
        </div>
        <div class="section__content" data-item="tab-2">
          <p>Text for tab 2 .Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
        </div>
        <div class="section__content" data-item="tab-3">
          <p>Text for tab 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
        </div>
      </div>

    </div>
  </div>
</div>

Here's another option. Instead of hide()/show(), you can use css transitions along with opacity and max-height to create an accordian effect.

$(function() {

  $(".section__label:first").addClass("active");
  $(".section__content:first").addClass("active");

  $('.section__label').click(function() {

    var id = $(this).attr('data-item');

    $(".section__label").removeClass("active");
    $(this).addClass("active");

    $(".section__content.active").removeClass('active');
    $(".section__content[data-item='" + id + "']").addClass('active');

  });


});

.section {
  background: lightblue;
  padding: 100px 0;
  border: 1px solid black;
}

.section__tabs {
  display: flex;
  flex-direction: column;
}

.section__label {
  cursor: pointer;
  display: inline-block;
}

.section__label.active {
  color: orange;
}

.section__content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
  border: 1px solid red;
}

.section__content.active {
  max-height: 1000px;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">


<div class="section">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-3">
        <div class="section__tabs">
          <span class="section__label" data-item="tab-1">Tab 1</span>
          <span class="section__label" data-item="tab-2">Tab 2</span>
          <span class="section__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-7">
        <div class="section__content" data-item="tab-1">
          <p>Text for tab 1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
        </div>
        <div class="section__content" data-item="tab-2">
          <p>Text for tab 2 .Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
        </div>
        <div class="section__content" data-item="tab-3">
          <p>Text for tab 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
            sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
        </div>
      </div>

    </div>
  </div>
</div>

Answered By - Kinglish