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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


<div >
  <div >
    <div >

      <div >
        <div >
          <span  data-item="tab-1">Tab 1</span>
          <span  data-item="tab-2">Tab 2</span>
          <span  data-item="tab-3">Tab 3</span>
        </div>
      </div>

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

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


<div >
  <div >
    <div >

      <div >
        <div >
          <span  data-item="tab-1">Tab 1</span>
          <span  data-item="tab-2">Tab 2</span>
          <span  data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div >
        <div  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  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  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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


<div >
  <div >
    <div >

      <div >
        <div >
          <span  data-item="tab-1">Tab 1</span>
          <span  data-item="tab-2">Tab 2</span>
          <span  data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div >
        <div  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  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  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>