Cambiare colore all'icona nell'accordion in Bootstrap 5

Sto lavorando su un template basato su Bootstrap 5.

Per la maggior parte dei componenti ho una regola CSS custom.

Ma non sulla freccia dell'accordion, che continuava ad essere blu.

Intercettare evento scroll con jQuery

L'esigenza primaria era quella di chiudere tutto i jQuery UI Accordion appena viene scrollata la pagina con la rotella del mouse.

Non chiedetemi per quale motivo mi è stata fatta questa richiesta perchè non la capisco.

Però il cliente ha sempre ragione.....

Controllare se jQuery UI Accordion è aperto o chiuso

Oggi vediamo un piccolo trucco per controllare se un jQuery UI Accordion è aperto o chiuso.

Per farlo useremo jQuery e le proprietà CSS.

Questo perchè quando un accordion è aperto ha alcune classi, e viceversa.

Un semplice Accordion con jQuery

Gli Accordion menu sono sempre più usati.

In verità anche non solo per i menu, ma per i box con divesri contenuti.

Se avete jQuery UI già integrato potete tranquillamente usare la funzione accordion inclusa.

Sennò, con jQuery, possiamo crearne uno noi in maniera semplice.

Partiamo dalla pagina:

<div id="accordion"> <div class="level"> <a href="#" class="opening"><h3>DIV 1</h3></a> <div class="expanded"> <p> TESTO </p> </div> <a href="#" class="opening"><h3>DIV 2</h3></a> <div class="expanded"> <p> TESTO </p> </div> <a href="#" class="opening"><h3>DIV 3</h3></a> <div class="expanded"> <p> TESTO </p> </div> </div> </div>

Abbiamo 3 div con diverso conteuto.