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 class="cont"><h1>Hello 1</h1></div>
<div class="cont"><h1>Hello 2</h1></div>
<div class="cont"><h1>Hello 3</h1></div>
<div class="cont"><h1>Hello 4</h1></div>
<button id="btn">
Click
</button>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 class="cont">
<h1>Hello 1</h1>
</div>
<div class="cont">
<h1>Hello 2</h1>
</div>
<div class="cont">
<h1>Hello 3</h1>
</div>
<div class="cont">
<h1>Hello 4</h1>
</div>
<button id="btn">
Click
</button>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 class="cont">
<h1>Hello 1</h1>
</div>
<div class="cont">
<h1>Hello 2</h1>
</div>
<div class="cont">
<h1>Hello 3</h1>
</div>
<div class="cont">
<h1>Hello 4</h1>
</div>
<button id="btn">
Click
</button>