• HTML
• CSS

HTML

<div x-data="{ id: 'uno' }">

    <a class="titulo" @click="id = 'uno'">Título 1</a>
    <div class="contenido" :class="{ 'active': id === 'uno' }">
        Busque, aprende y crea tu página Web con los elementos y componentes de Frelements.
    </div>
     
    <a class="titulo" @click="id = 'dos'">Título 2</a>
    <div class="contenido" :class="{ 'active': id === 'dos' }">
        Busque, aprende y crea tu página Web con los elementos y componentes de Frelements.
    </div>
    
    <a class="titulo" @click="id = 'tres'">Título 3</a>
    <div class="contenido" :class="{ 'active': id === 'tres' }">
        Busque, aprende y crea tu página Web con los elementos y componentes de Frelements.
    </div>
    
</div>

CSS

body{
    font-family:sans-serif;
}
.titulo{
    display:block;
    padding:1rem;
    background:#8e44ad;
    color:#fff;
    cursor:pointer;
}
.titulo:hover{
    background:#6c3483;
}
.contenido{
    height:0rem;
    overflow:hidden;
    padding:0rem;
    transition:all 0.3s;
}
.contenido.active{
    height:auto;
    padding:0.5rem 0.5rem;
    border:1px solid #8e44ad;
}