Vamos a ver como crear un acrodeón en bootstrap 4, aunque ya vimos en su momento como hacerlo con html y css, con este framework es muchísimo más simple y no tenemos que preocuparnos por apenas nada más allá del contenido.

Para ello vamos a usar los atributos data-toggle y data-target que nos dicen que tipo de elemento es y a donde apunta para generar la acción.

Después de ello tan solo hay que marcar con la id el objetivo e introducirle el contenido.

<div data-toggle="collapse" data-target="#demo" class="bg-primary">primero</div>
<div id="demo" class="collapse">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	
</div>
<div data-toggle="collapse" data-target="#demo2" class="bg-primary">segundo</div>
<div id="demo2" class="collapse">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	
</div>
<div data-toggle="collapse" data-target="#demo3" class="bg-primary">tercero</div>
<div id="demo3" class="collapse show">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	
</div>

Aunque yo prefiero que los acordeones funcionen con la cabecera sobre cada contenido, se puede hacer utilizando botones o enlaces. Para estos últimos no es necesario poner el atributo data-target y se puede introducir el target dentro del atributo href.

<a data-toggle="collapse" href="#demo4" class="bg-clear">primero</a>
<div id="demo4" class="collapse">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	
</div>
<a data-toggle="collapse" href="#demo5" class="bg-clear">segundo</a>
<div id="demo5" class="collapse">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	
</div>
<a data-toggle="collapse" href="#demo6" class="bg-clear">tercero</a>
<div id="demo6" class="collapse">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	
</div>

Como vemos el código apenas difiere, pero la experiencia de usuario no es la misma de lejos.

Pero hay otra forma más atractiva de hacer acordeones en bootstrap 4, y es por medio de las cards, que aquí sirven para dar un formato más atractivo a nuestro elemento.

<div id="acordeon">
	<div class="card">
		<div class="card-header">
			<a href="#uno" class="card-link" data-toggle="collapse" data-parent="#acordeon">Primero</a>
		</div>
		<div id="uno" class="collapse">
			<div class="card-body">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
			
		</div>
		<div class="card-header">
			<a href="#dos" class="card-link" data-toggle="collapse" data-parent="#acordeon">Segundo</a>
		</div>
		<div id="dos" class="collapse">
			<div class="card-body">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
			
		</div>
	</div>
</div>

En esta forma vemos que lo primero que hacemos es crear un div que va envolver nuestro contenedor con la clase acordeón, aunque podríamos haberle puesto el nombre que hubiéramos querido.

A continuación creamos otro div con la clase de bootstrap 4, card, donde vamos a introducir los elementos del acordeón.

El siguiente elemento es otro div con la clase card-header, que indica que es la cabecera de grupo y en el cual se encuentra una etiqueta a, aunque podría ser otro elemento con el target en un data-target en lugar de en el href. Vemos que el elemento de cabecera tiene una clase llamada card-link y dos atributos, ademas del punto al que apunta:

• data-toggle=»collapse»; que indica que estamos haciendo que un elemento aparezca o desaparezca
• data-parent=»#acordeon»; que dice cual es el padre que envuelve a todo el conjunto de elementos.

A continuación lo que nos encontramos es un div con la id a la que esta apuntando la cabecera del elemento y con la clase collapse y dentro de este div otro con el la clase card-body que es donde se encuentra el contenido a mostrar u ocultar.

Todo esto dicho así es un poco lío, pero mirando los códigos de ejemplo seguro que lo entiendes perfectamente, además aquí te dejo el resultado de los tres ejemplos para que puedas comparar y escoger el que mejor te venga.