<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js