Desplegables

Agrupar la informació en blocs de contingut ajuda a ser ordenat.

Els desplegables (o accordions) són caixetes amb un títol que, quan es cliquen, mostren un calaix amb contingut que estava amagat.

Exemples de desplegables

En alguns casos, s'utilitza un sol desplegable i en altres es poden utilitzar els desplegables com a conjunt, per exemple al node de tràmits acadèmics.

Com s'afegeixen desplegables a un node

Un únic desplegable

Per afegir un desplegable cal que enganxis l'estructura HTML següent al codi font de la pàgina.

<div id="as-1" class="accordion">
	<div class="card">
		<div class="card-header collapsed" id="heading-as-1" data-bs-toggle="collapse" data-target="#as-1-collapse" aria-expanded="false">
			<h5>
				<a href="#as-1-collapse" class="btn-link collapsed" data-bs-toggle="collapse" data-target="#as-1-collapse" data-parent="#heading-as-1" aria-expanded="false" aria-controls="as-1-collapse" role="button">
					titolDesplegabe
				</a>
				<a href="#as-1-collapse" class="btn-link btn-xs accordion-icon collapsed" data-bs-toggle="collapse" data-target="#as-1-collapse" data-parent="#as-1" aria-expanded="false" aria-controls="as-1-collapse" role="button">
					<span class="sr-only">Obrir/Tancar</span></a>
			</h5>
		</div>
		<div id="as-1-collapse" class="collapse" aria-labelledby="heading-as-1" data-parent="#as-1" style="">
			<div class="card-body">
				textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe
				textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe
				textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe
				textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe
				textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe-textDesplegabe
			</div>
		</div>
	</div>
</div>

Més d'un desplegable

El codi anterior es pot copiar múltiples vegades, una sota l'altra per crear diferents desplegables. Tingues en compte que, un cop tenim el codi copiat, cal fer un buscar/substituir dins de cada desplegable:

1. Busca: as-1.

2. Substitueix-ho per: as-n. n és el número d'índex (consecutiu) del desplegable.

Com es fan modificacions als desplegables

Pots canviar alguns atributs dels desplegables modificant les etiquetes del codi.

Com es presenta un desplegable obert directament

Si necessites que l'usuari trobi el desplegable obert en entrar a la pàgina, cal que el desplegable tingui el codi següent:

<div id="as-1" class="accordion">
	<div class="card">
		<div class="card-header" id="heading-as-1" data-toggle="collapse" data-target="#as-1-collapse" aria-expanded="true">
			<h5>
				<a href="#as-1-collapse" class="btn-link" data-toggle="collapse" data-target="#as-1-collapse" data-parent="#heading-as-1" aria-expanded="true" aria-controls="as-1-collapse" role="button">titolDesplegabe</a>
				<a href="#as-1-collapse" class="btn-link btn-xs accordion-icon" data-toggle="collapse" data-target="#as-1-collapse" data-parent="#as-1" aria-expanded="true" aria-controls="as-1-collapse" role="button"><span class="sr-only">Obrir/Tancar</span></a>
			</h5>
		</div>
		<div id="as-1-collapse" class="collapse show" aria-labelledby="heading-as-1" data-parent="#as-1" style="">
			<div class="card-body">
				text
			</div>
		</div>
	</div>
</div>