A USC utiliza dúas modalidades da mesma fonte que se utilizan en reBUSCa do seguinte xeito:
Fonte principal das guías.
Reservada para a páxina principal e o título das guías
Atención!
O código hai que copialo na vista do Editor, pero hai que pegalo na vista HTML
<div class="accordion" id="accordion-YYY">
<div class="card">
<h3 class="card-header" id="heading-XX"><button aria-controls="collapse-XX" aria-expanded="false" class="accordion-button collapsed" data-target="#collapse-XX" data-toggle="collapse" type="button">
Accordion Item #1
</button></h3>
<div aria-labelledby="heading-XX" class="collapse" data-parent="#accordion-YYY" id="collapse-XX">
<div class="accordion-body">
Aquí vai o contido do ítem #1
</div>
</div>
</div>
</div>
Coidado!
Non borrar ningún dos elementos resaltados do código. O acordeón perdería a estrutura e o formato.
Acordeón completo, que contén todos os demais elementos entre as etiquetas: <div class="accordion" id="accordion-YYY">...</div>
É importante establecer un id=" " único ao longo de todo o sistema de LibGuides. Unha forma consistente de facelo é utilizar o id da caixa onde vai o acordeón e incluílo como distintivo. No caso desta caixa, se incluísemos un acordeón sería o seguinte:
id="accordion-15689961"
O id da caixa - Box ID - onde vai o acordeón pode copiarse facendo clic na icona da parte superior dereita da caixa.
O id do acordeón ten que coincidir obrigatoriamente co elemento data-parent do compoñente 4 do código.
data-parent="#accordion-15689961"
É cada un dos items do acordeón. Podemos poñer tantos como necesitemos e teñen que estár aniñados, obrigatoriamente, nas etiquetas do compoñente 1.
<div class="accordion" id="accordion-xxx">
<div class="card">
</div>
</div>
Cada vez que queiramos engadir un Accordion Item teremos que copiar todo o código do compoñente 2 <div class="card">...</div> e pegalo antes da última etiqueta </div> do acordeón.
Neste compoñente do acordeón vai a cabeceira do item, no exemplo Accordion Item #1. Só pode poñerse unha vez en cada Accordion Item.
Elementos importante son o id heading e os collapse:
que teñen que coincidir cos seguintes elementos do compoñente 4:
Debemos substituír os "XX" por un número. Ao primeiro ítem poñerémoslle 01, ao segundo 02, etc.
id="heading-01"aria-controls="collapse-01"data-target="#collapse-01"
Ábrese ao facer clic na cabeceira do item. Vai a continuación do compoñente 3, aniñado nas etiquetas <div class="accordion-item"></div>
Ten os elementos que deben coincidir co compoñente 3:
aria-labelledby="heading-01"id="collapse-01"No Accordion Item 2, substituiriamos o 01 por 02 e así sucesivamente.
Tamén o data-parent="#accordion-15689961" que debe coincidir co id="accordion-15689961" do compoñente 1.
É o contido do panel colapsado (4) e vai aniñado nas etiquetas deste:
<div aria-labelledby="..>
<div class="accordion-body">
Aquí vai o contido
</div>
</div>
Este contido pode levar calquera compoñente do editor de texto enriquecido (Rich Text)
Atención!
Toda a edición de cada un dos elementos do acordeón hai que facela na vista HTML
Como os usuarios de LibGuides non teñen por que coñecer a linguaxe HTML, imos dar aquí unha serie de instrucións para facer o traballo máis fácil.
1. Na guía que estamos creando ou editando, engadir unha caixa (ou contido adicional Rich Text / HTML a unha caixa existente) onde vai ir o acordeón.
2. Localizar nesta guía (Manual de estilo) o código do acordeón, na vista do editor ou na vista previa ou pública, non na vista HTML, da guía.
3. Copiar o código.
4. Ir á guía e á caixa onde vai ir o acordeón.
5. Alí, na vista HTML, pegar o código. Save & Close
6. Ir á icona da mesma caixa, na parte superior dereita da mesma, e copiar o Box ID. Close
7. Editar a mesma caixa e, na vista HTML, pegar o Box ID onde se atopan os tres i gregos YYY. Poñer onde se atopan os dous equis XX o número do ítem do acordeón (se é o primeiro, 01; se é o segundo, 02, etc.).
8. Substituír onde dí Accordion Item #1 polo título que corresponda. Save & Close
9. Na mesma guía, e recomendamos que sexa a continuación daquela onde vai o acordeón, engadir unha caixa oculta, con contido Rich Tex / HTML.
10. Nesta caixa oculta, elaborar o contido do primeiro ítem do acordeón na vista do editor de texto enriquecido. Ir gardando Save a medida que vaiamos facendo o contido. Gardar outra vez ao final.
11. Ir á vista HTML e copiar todo o código. Close
12. Ir á caixa do acordeón e, na vista HTML, pegar o códio onde dí Contido do Item #1. Save & Close
13. Se queremos engadir máis ítems ao acordeón, repetir desde o paso 2 pero copiar só o código das etiquetas
<div class="card">...</div>
e todo o que hai polo medio.
14. Volver á caixa do acordeón e na vista HTML, pegar o código antes do último </div> e remplazar os XX según o número do ítem que corresponda, e tamén o título do ítem onde dí Accordion Item #1.
15. Substituír YYY polo Box ID como fixemos no ítem anterior.
16. Ir á caixa oculta, engadir outro contido Rich Text / HTML, e repetir dende o paso número 10.
A partir de aquí, repetir dende o paso 13 tantas veces como sexa necesario.
No vídeo, a continuación, podedes ver como é o proceso.
