Vés al contingut (premeu Retorn)

Acordió o desplegable

Dificultat Mitjana

Els desplegables o accordion en anglès són contenidors de contingut que ens mostren el contingut un cop els seleccionem cada apartat.

 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat ac neque hendrerit varius. Etiam a viverra dolor. Duis vitae ex sed tortor elementum egestas. Proin efficitur lacus ac porttitor condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus velit magna, accumsan id arcu quis, laoreet maximus est. Nullam suscipit augue eget posuere convallis. Morbi cursus sagittis nisl at varius. Vestibulum lacinia sem consectetur, accumsan est et, feugiat urna. Vivamus sit amet eros a diam sodales vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat ac neque hendrerit varius. Etiam a viverra dolor. Duis vitae ex sed tortor elementum egestas. Proin efficitur lacus ac porttitor condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus velit magna, accumsan id arcu quis, laoreet maximus est. Nullam suscipit augue eget posuere convallis. Morbi cursus sagittis nisl at varius. Vestibulum lacinia sem consectetur, accumsan est et, feugiat urna. Vivamus sit amet eros a diam sodales vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat ac neque hendrerit varius. Etiam a viverra dolor. Duis vitae ex sed tortor elementum egestas. Proin efficitur lacus ac porttitor condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus velit magna, accumsan id arcu quis, laoreet maximus est. Nullam suscipit augue eget posuere convallis. Morbi cursus sagittis nisl at varius. Vestibulum lacinia sem consectetur, accumsan est et, feugiat urna. Vivamus sit amet eros a diam sodales vestibulum.

Crear un acordió o desplegable

Seleccionar la plantilla

Obrirem l'editor del Genweb i buscarem el botó que ens permet obrir uns continguts predefinits, en concret l'anomenat Acordió, el qual ens deixa inserir trossos de codi html que hem d'adaptar a la realitat que volem, sovint editant codi html.

Farem clic a la barra d'eines a la part superior i del desplegable seleccionarem l'ítem que diu Acordió. Tot seguit farem clic al botó de la part inferior on posa insereix.

D'aquesta forma el codi predefinit a la plantilla s'inserirà a la posició en la qual hàgim deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document)

Visualitzar el codi HTML

El codi html és bàsic per a editar continguts en qualsevol plataforma CMS, com per exemple, aquesta. És per això que us deixem un enllaç a aquest tutorial, on podeu trobar una guia de referència.

Un cop tenim carregada la plantilla podem accedir al codi fent clic al botó HTML de la barra d'eines del nostre editor.

Interpretar el codi HTML

El codi html que forma la pàgina se'ns mostrarà d'una forma similar a la de la imatge, però és aconsellable tenir un editor html extern ja sigui d'un programari amb llicència descarregable de la pròpia web de distribució de software d'UPCnet o algun que sigui gratuït com per exemple Notepad++, ja que, per segons quin nivell d'edició de codi ens resultarà més fàcil editar el codi en aquests programes i inserir-lo de nou un cop editat. 

El primer que aconsellem és tabular el codi, es a dir, identificar on comencen les etiquetes <tags> capes <div> etc. que engloben altres capes i etiquetes.

En aquest cas tenim una capa contenidora general class=accordion id="accordion2" i un tipus de capa contenidora del grup de desplegables anomenada class="accordion-group" que itera per contenir cada ítem. Dintre de cada accordion-group tenim la capa de tipus class="accordion-heading" on va el títol i el tipus de capa class="accordion-body collapse" al qual si l'afegim l'atribut in "accordion-body collapse in" farà que el desplegable estigui desplegat i no recollit. Finalment, dintre de la capa de tipus class="accordion-inner" hi ha el contingut. Després torna a iterar la sèrie "accordion-group" etc.

<div class="accordion" id="accordion2">
	<div class="accordion-group">
		<div class="accordion-heading">
			<a class="accordion-toggle collapsed" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"> Collapsible Group Item #1 </a>
		</div>
		<div class="accordion-body collapse" id="collapseOne">
			<div class="accordion-inner">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat ac neque hendrerit varius. Etiam a viverra dolor. Duis vitae ex sed tortor elementum egestas. Proin efficitur lacus ac porttitor condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus velit magna, accumsan id arcu quis, laoreet maximus est. Nullam suscipit augue eget posuere convallis. Morbi cursus sagittis nisl at varius. Vestibulum lacinia sem consectetur, accumsan est et, feugiat urna. Vivamus sit amet eros a diam sodales vestibulum.
			</div>
		</div>
	</div>

	<div class="accordion-group">

	[...]

Personalitzar el nostre acordió o desplegable. Dubtes freqüents

És important, com a qualsevol altre contingut que vulguem editar, tenir clar què volem des del principi. Per exemple, quantes pestanyes volem d'inici i quins seran els continguts que volem que es mostrin, així com totes les consideracions que siguin necessàries en funció del que vulguem aconseguir. Personalitzar plantilles avançades com aquesta requereix un cert nivell de coneixement de codi html.

Podeu trobar més informació al respecte, fent clic aquí.