Height of the Inner Content doesn't get changed when changing the container height-CodePudding

I want the 3rd element to take the place of the element second when clicked on the button, I know I can use .remove() to remove that specific block of code, but it will not gonna transition, so I want the third element to take place of the second with transition instead of direct getting there. How can I do that? I try to do the example but changing the height of the 2nd container, but the inner Content didn't change and it also didn't transition even though I have set the transition on the height

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
    const all = document.querySelectorAll('.cont');
  all[1].classList.add('changeheight');
})

.changeheight {
  height: 0px;
  transition: height 250ms ease;
}

<div ><h1>Hello 1</h1></div>
<div ><h1>Hello 2</h1></div>
<div ><h1>Hello 3</h1></div>
<div ><h1>Hello 4</h1></div>


<button id="btn">
  Click
</button>

CodePudding user response：

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const all = document.querySelectorAll('.cont');
  all[1].classList.add('changeheight');
})

* {
  margin: 0;
  padding: 0;
}

.cont {
  height: 50px;
}

.changeheight {
  height: 0px;
  transition: height 350ms ease;
}

<div >
  <h1>Hello 1</h1>
</div>
<div >
  <h1>Hello 2</h1>
</div>
<div >
  <h1>Hello 3</h1>
</div>
<div >
  <h1>Hello 4</h1>
</div>


<button id="btn">
        Click
    </button>

CodePudding user response：

Add overflow: hidden to changeHeight class and take some idea from @CyrusKabir answer

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
    const all = document.querySelectorAll('.cont');
  all[1].classList.add('changeheight');
})

* {
  margin: 0;
  padding: 0;
}

.cont {
  height: 50px;
}

.changeheight {
  height: 0px;
  transition: height 550ms ease;
  overflow: hidden;
}

<div >
  <h1>Hello 1</h1>
</div>
<div >
  <h1>Hello 2</h1>
</div>
<div >
  <h1>Hello 3</h1>
</div>
<div >
  <h1>Hello 4</h1>
</div>


<button id="btn">
        Click
    </button>