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.

Creant un acordió o desplegable

Seleccionant la plantilla

Obrirem l'editor del genweb i buscarem la eina que ens permet obrir uns continguts predefinits anomenats pestanyes, els quals ens insereixen trossos de codi html que hem d'adaptar a la realitat que volem que finalment tingui el nostre contingut i per això sovint hem d'editar codi html.

Farem clic a la barra d'eines a la part superior i del desplegable seleccionarem l'item 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 que haguem deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document)

Visualitzant el codi HTML

El codi html és bàsic per editar continguts en qualsevol plataforma CMS com per exemple aquesta, es 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.

Interpretant 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 software amb llicència descarregable a la 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 item. 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">

	[...]

Customitzant 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, quants items desplegables volem crear així com els continguts que volem que es mostrin així quantes consideracions més siguin necessàries en funció del que vulguem aconseguir. Customitzar plantilles avançades com aquesta requereix un cert nivell de coneixement html.


Podeu trobar més informació fent clic aquí