Ajouter un accordéon à l'opac dans la colonne centrale

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" ...