• HTML
• CSS

HTML

<div class="acordeon">
    <div class="acordeon__item">
        <input type="radio" name="acordeon" id="item1">
        <label for="item1" class="acordeon__titulo">Título 1</label>
        <p class="acordeon__contenido">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex necessitatibus molestiae unde, qui itaque porro nostrum minima molestias explicabo quos. Cum nostrum tempore non ipsam voluptas, nemo eligendi totam cumque.</p>
    </div>
    <div class="acordeon__item">
        <input type="radio" name="acordeon" id="item2">
        <label for="item2" class="acordeon__titulo">Título 2</label>
        <p class="acordeon__contenido">Facere dignissimos eum nostrum, mollitia, ex illo aliquid assumenda accusamus? Quis facilis modi perspiciatis illum quam earum architecto adipisci sapiente. Expedita nesciunt hic ab nemo, velit enim, eligendi rem voluptatem!</p>
    </div>
    <div class="acordeon__item">
        <input type="radio" name="acordeon" id="item3">
        <label for="item3" class="acordeon__titulo">Título 3</label>
        <p class="acordeon__contenido">Accusantium eveniet ipsa quaerat nostrum nihil velit enim nesciunt corporis, dolorem, similique distinctio fugiat ipsam atque quidem placeat, error repellendus odio dolorum esse tenetur quos est maiores nulla sapiente neque?</p>
    </div>
    <div class="acordeon__item">
        <input type="radio" name="acordeon" id="item4">
        <label for="item4" class="acordeon__titulo">Título 4</label>
        <p class="acordeon__contenido">Doloremque tempora laudantium asperiores accusamus, nostrum cupiditate, officia officiis placeat suscipit ipsum, quas. Consequatur ex quaerat itaque ducimus aliquid adipisci, iusto odit velit explicabo optio sint fugit dolore assumenda eos.</p>
    </div>
</div>

CSS

* {
	box-sizing:border-box;
}
.acordeon input {
	display:none;

}
.acordeon__titulo{
	display:block;
	padding: 15px;
	background: crimson;
	color:#fff;
	font-size: 20px;
	cursor:pointer;
	border-bottom:1px solid #fff;
}
.acordeon__titulo:hover {
	background:rgba(220,20,60,0.8);
}
.acordeon__contenido {
	height: 0;
	overflow: hidden;
	margin:0;
	transition: all 0.5s;
}
.acordeon input:checked ~ .acordeon__contenido {
	height:auto;
	margin:15px 0;

}