Ajouter un accordéon à l'opac dans la colonne centrale
Pour obtenir un menu en accordéon de ce type
1. Ajouter du contenu dans l'outil Nouvelles
Dans l'outil Nouvelles, ajouter une nouvelle de ce type pour l'option OpacMainUserBlock
Les textes en rouge sont à modifier pour répondre à vos besoins
<body>
<div class="accordion-body">
<div class="accordion">
<h1>CONTENU</h1>
<hr>
<div class="container">
<div class="label">Titre 1</div>
<div class="content">Contenu 1</div>
</div>
<hr>
<div class="container">
<div class="label">Titre 2</div>
<div class="content">Contenu 2</div>
</div>
<hr>
<div class="container">
<div class="label">Titre 3</div>
<div class="content">Contenu 3</div>
</div>
<hr>
<div class="container">
<div class="label">Titre 4</div>
<div class="content">Contenu 4</div>
</div>
<hr>
<div class="container">
<div class="label">Titre 5</div>
<div class="content">Contenu 5</div>
</div>
</div>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
L'affichage sera ceci dans la nouvelle
2. Ajout de code css
Dans la préférence système OpacUserCSS il faut rajouter ce code
/*ACCORDEON*/
/* Paramètre de la taille de l'accordéon. La marge est de 90px partout */
.accordion {
width: 600px;
margin: 90px auto;
color: black;
background-color: white;
padding: 45px 45px;
}
.accordion .container {
position: relative;
margin: 10px 10px;
}
.accordion .label {
position: relative;
padding: 10px 0;
font-size: 30px;
color: black;
cursor: pointer;
}
/* permet de cacher le menu, height doit rester à 0 */
.accordion .content {
position: relative;
background: white;
height: 0;
font-size: 20px;
text-align: justify;
width: 780px;
overflow: hidden;
transition: 0.5s;
}
/*rajoute une ligne horizontale entre les contenus */
.accordion hr {
width: 100;
margin-left: 0;
border: 1px solid grey;
}
/*décacher le contenu, ajutster la hauteur */
.accordion .container.active .content {
height: 400px;
}
/*pour l'affichage du moins à droite du titre*/
.accordion .label::before {
content: '+';
color: black;
position: absolute;
top: 50%;
right: -25px;
font-size: 30px;
transform: translateY(-50%);
}
/* pour changer le + en - */
.accordion .container.active .label::before {
content: '-';
font-size: 30px;
}
/*FIN ACCORDEON*/
3. Ajout de code javascript
Le code doit être mis au-dessus de la ligne $(document).ready(function() { dans la préférence système OpacUserJS
const accordion = document.getElementsByClassName('container');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active');
});
}
Related Articles
Présenter son contenu dans un accordéon
L'accordéon est une façon simple et élégante de présenter son contenu différemment. La présente astuce vous montre comment s'y prendre : À noter que l'astuce a été présentée lorsque l'ancien module H5P était utilisé. Il n'est plus possible de ...
Dupliquer les informations d’un produit
Dans cette capsule, nous aborderons la possibilité de dupliquer des informations d'une fiche de produit. Lorsque l'on consulte la fiche d'un produit dans le module de l'inventaire, nous avons deux options pour copier l’information déjà enregistrée. ...
Ajouter de l’information dans une info-bulle dans l’exemplaire à l’OPAC
Autre nouveauté dans l’affichage d’une notice en vue détaillée, vous pouvez rajouter de l’information dans une info-bulle lors du passage de la souris dans la case Localisation d’un exemplaire. Le texte de cette info-bulle est paramétrable en ...
Insérer des médias dans les notices à l’OPAC
Procédure pour insérer un média (vidéo ou audio) directement dans une notice en vue détaillée. 1. Avec le HTML5 1.1 Préférences systèmes HTML5MediaEnabled : 4 choix possibles, à l’opac, à l’intranet, les deux ou nulle part. Le média s’affichera dans ...
Ajouter une image dans une nouvelle à l’OPAC
Pour ajouter une image dans une nouvelle de l’outil « Nouvelles » vous devez mettre du code html. Visionnez d’abord la vidéo suivante: Et voici donc le code à copier/coller dans la nouvelle dans la fenêtre html <img alt="texte de remplacement" ...