Estilos para crear bloques desplegables.
Para crear un bloque desplegable, se debe englobar tanto el lanzador como el menú en un div con el atributo data-collapse y la clase .collapse. Dentro, necesitamos añadir el atributo data-collapse-trigger al elemento lanzador (por ejemplo un button, un a o un div). El bloque desplegable se debe englobar en un elemento (normalmente un div) con la clase .collapse__content y el atributo data-collapse-content, y en su interior, un div con el atributo data-collapse-inner.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas lacinia dui non luctus feugiat. Mauris tincidunt gravida cursus. Aenean pellentesque eu massa et vestibulum. Aenean nulla purus, volutpat quis hendrerit sit amet, volutpat nec nisi. Mauris nec gravida urna, in sollicitudin mauris. Proin pulvinar nulla sit amet pretium varius. Cras bibendum sem eget turpis sagittis pulvinar.
<div class="collapse" data-collapse>
<button class="btnlink" data-collapse-trigger title="Texto descriptivo" aria-label="Area colapsable" aria-expanded="false" aria-controls="collapse__content1">
<span class="icon icon--plus icon--before is-active-hidden" aria-hidden="true"></span>
<span class="icon icon--plus icon--plus--rotate icon--before is-active-visible" aria-hidden="true"></span>
</button>
<div class="collapse__content" data-collapse-content id="collapse__content1">
<div data-collapse-inner>
...
</div>
</div>
</div>
Para que el collapse se despliegue al cargar la página, se debe añadir la clase uncollapsed al elemento con el atributo data-collapse.
Además, se debe añadir la clase uncollapsed-sm, uncollapsed-md y uncollapsed-lg si se quiere que el collapse únicamente se despliegue en móvil, tablet o desktop respectivamente.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas lacinia dui non luctus feugiat. Mauris tincidunt gravida cursus. Aenean pellentesque eu massa et vestibulum. Aenean nulla purus, volutpat quis hendrerit sit amet, volutpat nec nisi. Mauris nec gravida urna, in sollicitudin mauris. Proin pulvinar nulla sit amet pretium varius. Cras bibendum sem eget turpis sagittis pulvinar.
<div class="uncollapsed collapse" data-collapse>
<button class="btnlink" data-collapse-trigger title="Texto descriptivo" aria-label="Area colapsable" aria-expanded="false" aria-controls="collapse__content1">
<span class="icon icon--plus icon--before is-active-hidden" aria-hidden="true"></span>
<span class="icon icon--plus icon--plus--rotate icon--before is-active-visible" aria-hidden="true"></span>
</button>
<div class="collapse__content" data-collapse-content id="collapse__content1">
<div data-collapse-inner>
...
</div>
</div>
</div>
Tiene el mismo comportamiento que el Collapse simple, pero parte de un texto inicial al que se le aplica un collapse para seguir leyendo.
Para crear un bloque desplegable, se debe englobar tanto el lanzador como el menú en un div con el atributo data-collapse y la clase .collapse. Dentro, necesitamos añadir el atributo data-collapse-trigger al elemento lanzador (por ejemplo un button, un a o un div). El bloque desplegable se debe englobar en un elemento (normalmente un div) con la clase .collapse__content y el atributo data-collapse-content, y en su interior, un div con el atributo data-collapse-inner.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas lacinia dui non luctus feugiat. Mauris tincidunt gravida cursus. Aenean pellentesque eu massa et vestibulum. Aenean nulla purus, volutpat quis hendrerit sit amet, volutpat nec nisi. Mauris nec gravida urna, in sollicitudin mauris. Proin pulvinar nulla sit amet pretium varius. Cras bibendum sem eget turpis sagittis pulvinar.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
</p>
<div class="collapse" data-collapse>
<button class="btnlink" data-collapse-trigger title="Texto descriptivo" aria-label="Area colapsable" aria-expanded="false" aria-controls="collapse__content2">
<span class="icon icon--plus icon--before is-active-hidden" aria-hidden="true"></span>
<span class="icon icon--plus icon--plus--rotate icon--before is-active-visible" aria-hidden="true"></span>
</button>
<div class="collapse__content" data-collapse-content id="collapse__content2">
<div data-collapse-inner>
...
</div>
</div>
</div>
Tiene el mismo comportamiento que el Reveal, pero en lugar de mostrar solo un icono, muestra el también texto "Ver más"/"Ver menos".
Para crear un bloque desplegable, se debe englobar tanto el lanzador como el menú en un div con el atributo data-collapse y la clase .collapse .collapse--show-more. Dentro, necesitamos añadir el atributo data-collapse-trigger al elemento lanzador (por ejemplo un button, un a o un div). El bloque desplegable se debe englobar en un elemento (normalmente un div) con la clase .collapse__content y el atributo data-collapse-content, y en su interior, un div con el atributo data-collapse-inner.
Para este tipo de bloque desplegable, hay que añadir a la clase principal de .collapse la clase modificadora .collapse--showmore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas lacinia dui non luctus feugiat. Mauris tincidunt gravida cursus. Aenean pellentesque eu massa et vestibulum. Aenean nulla purus, volutpat quis hendrerit sit amet, volutpat nec nisi. Mauris nec gravida urna, in sollicitudin mauris. Proin pulvinar nulla sit amet pretium varius. Cras bibendum sem eget turpis sagittis pulvinar.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
</p>
<div class="collapse collapse--show-more" data-collapse>
<button class="btnlink" data-collapse-trigger title="Texto descriptivo" aria-label="Area colapsable" aria-expanded="false" aria-controls="collapse__content3">
<span class="icon icon--plus icon--before is-active-hidden" aria-hidden="true"></span>
<span class="is-active-hidden">Ver más</span>
<span class="icon icon--plus icon--plus--rotate icon--before is-active-visible" aria-hidden="true"></span>
<span class="is-active-visible">Ver menos</span>
</button>
<div class="collapse__content" data-collapse-content id="collapse__content3">
<div data-collapse-inner>
...
</div>
</div>
</div>
Bloque que aparece plegado solamente en pantallas pequeñas, y desplegado para el resto. Se puede combinar con los responsive helpers para ocultar el lanzador en pantallas intermedias y grandes.
Tiene la misma estructura que el Collapse simple, pero se hace uso de la clase .collapse__content--mobile-only sobre el contenido al que se le aplicará el collapse en resolución móvil.
Bloque desplegable Collapse
<div class="collapse" data-collapse>
<button class="btnlink" data-collapse-trigger title="Texto descriptivo" aria-label="Area colapsable" aria-expanded="true" aria-controls="collapse__content5">
Lanzador
<span class="icon icon--plus icon--after icon--xsmall" aria-hidden="false"></span>
</button>
<div class="collapse__content collapse__content--mobile-only" data-collapse-content id="collapse__content5">
<div data-collapse-inner>
<div class="card card--light">
<div class="card__block">
<p>Bloque desplegable Collapse</p>
</div>
</div>
</div>
</div>
</div>
Para crear un sistema de bloques desplegables (acordeón), se reproduce cada bloque desplegable dentro de su div con el atributo data-collapse y se engloban todos estos bloques en un div con el atributo data-collapse-system. Para terminar, al elemento con el atributo data-collapse-trigger le añadiremos también el atributo data-collapse-system-trigger. El título tendrá la clase .collapse__title para que no se solape con el icono.
<div data-collapse-system role="list">
<div class="collapse collapse__wrapper" data-collapse role="listitem">
<h2>
<button class="btnlink collapse__trigger" data-collapse-trigger data-collapse-system-trigger aria-expanded="false" aria-controls="collapse__content6">
<span class="collapse__title">Grupo colapsable 1</span>
<span class="icon icon--arrow-down icon--after is-active-hidden float-right" aria-hidden="true"></span>
<span class="icon icon--arrow-up icon--after is-active-visible float-right" aria-hidden="true"></span>
</button>
</h2>
<div class="collapse__content" data-collapse-content id="collapse__content6" aria-hidden="true">
<div data-collapse-inner>
...
</div>
</div>
</div>
<div class="collapse collapse__wrapper" data-collapse role="listitem">
<h2>
<button class="btnlink collapse__trigger" data-collapse-trigger data-collapse-system-trigger aria-expanded="false" aria-controls="collapse__content7">
<span class="collapse__title">Grupo colapsable 2</span>
<span class="icon icon--arrow-down icon--after is-active-hidden float-right" aria-hidden="true"></span>
<span class="icon icon--arrow-up icon--after is-active-visible float-right" aria-hidden="true"></span>
</button>
</h2>
<div class="collapse__content" data-collapse-content id="collapse__content7" aria-hidden="true">
<div data-collapse-inner>
...
</div>
</div>
</div>
<div class="collapse collapse__wrapper" data-collapse role="listitem">
<h2>
<button class="btnlink collapse__trigger" data-collapse-trigger data-collapse-system-trigger aria-expanded="false" aria-controls="collapse__content8">
<span class="collapse__title">Grupo colapsable 3</span>
<span class="icon icon--arrow-down icon--after is-active-hidden float-right" aria-hidden="true"></span>
<span class="icon icon--arrow-up icon--after is-active-visible float-right" aria-hidden="true"></span>
</button>
</h2>
<div class="collapse__content" data-collapse-content id="collapse__content8" aria-hidden="true">
<div data-collapse-inner>
...
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis ligula sollicitudin velit rhoncus pulvinar. Sed egestas augue et dui commodo dignissim. Suspendisse interdum porttitor justo feugiat porttitor. Donec faucibus consequat dictum. Donec dignissim pretium porttitor. Fusce dictum lectus tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam orci ex, pharetra ac elementum non, lobortis sit amet erat.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas lacinia dui non luctus feugiat. Mauris tincidunt gravida cursus. Aenean pellentesque eu massa et vestibulum. Aenean nulla purus, volutpat quis hendrerit sit amet, volutpat nec nisi. Mauris nec gravida urna, in sollicitudin mauris. Proin pulvinar nulla sit amet pretium varius. Cras bibendum sem eget turpis sagittis pulvinar.
<div data-collapse-system>
<div class="collapse collapse__wrapper" data-collapse>
<h2>
<button class="btnlink collapse__trigger" data-collapse-trigger data-collapse-system-trigger
title="Texto descriptivo" aria-label="Area colapsable" aria-expanded="false"
aria-controls="collapse__content8">
<span class="collapse__title">Grupo colapsable 1</span>
<span class="icon icon--arrow-down icon--after is-active-hidden float-right" aria-hidden="false"></span>
<span class="icon icon--arrow-up icon--after is-active-visible float-right" aria-hidden="true"></span>
</button>
</h2>
<div class="collapse__content" data-collapse-content id="collapse__content8">
<div data-collapse-inner>
<p>
...
</p>
<div class="collapse collapse--show-more" data-collapse>
<button class="btnlink" data-collapse-trigger title="Texto descriptivo" aria-label="Area colapsable"
aria-expanded="false" aria-controls="collapse__content9">
<span class="icon icon--plus icon--xsmall icon--before is-active-hidden" aria-hidden="false"></span>
<span class="is-active-hidden">Ver más</span>
<span class="icon icon--plus icon--plus--rotate icon--xsmall icon--before is-active-visible" aria-hidden="true"></span>
<span class="is-active-visible">Ver menos</span>
</button>
<div class="collapse__content" data-collapse-content id="collapse__content9">
<div data-collapse-inner>
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Contenido pestaña 1
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
<div class="collapse collapse__wrapper" data-collapse>
<h2>
<button class="btnlink collapse__trigger" data-collapse-trigger data-collapse-system-trigger title="Texto descriptivo" aria-label="Area colapsable" aria-expanded="false" aria-controls="collapse__content12">
<span class="collapse__title">
Grupo colapsable 1
<span class="icon icon--arrow-down icon--after is-active-hidden float-right" aria-hidden="true"></span>
<span class="icon icon--arrow-up icon--after is-active-visible float-right" aria-hidden="true"></span>
</span>
</button>
</h2>
<div class="collapse__content" data-collapse-content id="collapse__content12">
<div data-collapse-inner>
<div class="row">
<div class="tab-system" data-tab-system>
<ul class="nav-tabs nav-tabs--basic" role="tablist">
<li class="col-md-4" role="presentation">
<h4>
<a class="tab is-active" href="#tab-content-4" id="tab-4" role="tab" aria-controls="tab-content-4" aria-selected="true" data-tab-trigger>
<span>Pestaña 1</span>
</a>
</h4>
</li>
<li class="col-md-4" role="presentation">
<h4>
<a class="tab" href="#tab-content-5" id="tab-5" role="tab" aria-controls="tab-content-5" aria-selected="false" data-tab-trigger>
<span>Pestaña 2</span>
</a>
</h4>
</li>
<li class="col-md-4" role="presentation">
<h4>
<a class="tab" href="#tab-content-6" id="tab-6" role="tab" aria-controls="tab-content-6"
aria-selected="false" data-tab-trigger>
<span>Pestaña 3</span>
</a>
</h4>
</li>
</ul>
<div class="tab-content is-active" id="tab-content-4" data-tab-content role="tabpanel" aria-labelledby="tab-4" aria-hidden="false">
<div class="col-xs-12">
<p>Contenido pestaña 1</p>
<p>...</p>
</div>
</div>
<div class="tab-content" id="tab-content-5" data-tab-content role="tabpanel" aria-labelledby="tab-5" aria-hidden="true">
<div class="col-xs-12">
<p>Contenido pestaña 2</p>
<p>...</p>
</div>
</div>
<div class="tab-content" id="tab-content-6" data-tab-content role="tabpanel" aria-labelledby="tab-6" aria-hidden="true">
<div class="col-xs-12">
<p>Contenido pestaña 3</p>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>