In order to make a section visible when a checkbox in another section is checked, I would like it to appear with a top-down animation effect. Below is the code snippet for the input located in the other section:
<div className="continue" id="first">
<button className="btn-continue">
Hire Plan
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Hire Plan</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>It's worth noting that the section I want to reveal initially has a display:none style attribute.