<div id="app"></div>
.title {
line-height: 20px;
background: #349de3;
color: #fff;
span {
cursor: default;
}
}
.pad-all {
padding: 16px;
}
.center {
align-self: center;
}
.flex-between-center {
display: flex;
justify-content: space-between;
align-items: center;
}
.inner {
background: #c9cacc;
img {
width: 100%;
}
}
.content-box {
transition: height 200ms ease-out;
overflow-y: hidden;
}
View Compiled
const Body = () => {
const [isExpanded, setIsExpanded] = React.useState(true)
const inner = React.useRef(null)
return (
<div>
<h3 className="title pad-all flex-between-center" onClick={() => setIsExpanded(!isExpanded)}>
<span className="">Toggle slide</span>
{!isExpanded && <span>Open</span>}
{isExpanded && <span>Close</span>}
</h3>
<div className={'content-box '} style={{height: isExpanded && inner.current ? inner.current.clientHeight + 'px' : 0}}>
<div className="inner pad-all" ref={inner}>
<img src="https://i.cbc.ca/1.3473565.1489087511!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/programming-code.jpg" alt="" />
</div>
</div>
</div>
)
}
ReactDOM.render(<Body />, document.getElementById('app'));
View Compiled
This Pen doesn't use any external CSS resources.