JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="bl_bg">
<div class="bl_container">

<div class="bl_main">

<div id="item1" class="bl_item item2">
Hello World! <p>Hello World!</p> <p>Hello World!</p>
</div>

<div id="item2" class="bl_item item1">
Goodbye World! <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p>
</div>

</div>




</div>
</div>

<p>
<a href="#" onclick="change();">click me</a>
</p>

CSS

body {margin:0;background-color:#dedede;}

.bl_bg {padding:20px;}
.bl_container {max-width:800px;margin:auto;box-sizing: border-box;padding:20px;background-color:#ffffff;}

.bl_main {box-sizing: border-box;position:relative;overflow:hidden;height: 0;
  transition: height 1s ease;}

.item1 {background-color:tomato;position:relative;width:100%;height: fit-content;}
.item2 {background-color:pink;display:none;width:100%;height: fit-content;}

JavaScript

function updateDiv() {
  outer.style.height = inner.clientHeight + 'px';
}

const outer = document.querySelector('.bl_main');
const inner = document.querySelector('.bl_item');



function change() {
var item1 = document.getElementById('item1');
if (item1.className === "bl_item item1") {item1.className = "bl_item item2";} else {item1.className = "bl_item item1";}
var item2 = document.getElementById('item2');
if (item2.className === "bl_item item2") {item2.className = "bl_item item1";} else {item2.className = "bl_item item2";}

updateDiv();
}



updateDiv();