Cette fiche de capacités possède le moyen de montrer divers levels. Vous pouvez l'utiliser comme une fiche de boutique, ou tout autre chose !

HTML

Code:

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap" rel="stylesheet"><div class="fichcapa001"><img src="https://i.pinimg.com/564x/a3/85/9a/a3859a88f51fbb3fa4612904ec74de13.jpg" class="headercapa"/><h1>Titre à mettre ici</h1><div class="paracap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla magna tortor, ut dapibus dolor pellentesque euismod. Quisque at metus et est lobortis imperdiet. Nulla nec velit viverra, dictum diam vitae, eleifend est. Donec in turpis quam. Quisque semper tempor ipsum, eu dictum odio pulvinar vitae. Maecenas non turpis ut augue efficitur lacinia. Nam lobortis ullamcorper ultrices. Integer non massa non tellus cursus viverra. Aliquam erat volutpat. Nunc ultricies luctus erat, sit amet gravida velit. Suspendisse a ante ac leo pretium tempor.</div><div class="ongletscapa">
  <div class="titrecapa">
      <span class="lvl1">Level 1</span>
      <span class="lvl2">Level 2</span>
      <span class="lvl3">Level 3</span>
      <span class="lvl4">Level 4</span>
    </div>
 </div>
    <div class="contpis"><div class="tablecapa"><h2 class="titr1">Nom</h2><h2 class="titr2">Description</h2><h2 class="titr3">Prérequis</h2></div><span class="qlvl1"><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div></span><span class="qlvl2"><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div></span><span class="qlvl3"><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div></span><span class="qlvl4"><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div><div class="levelcontent"><img src="https://i.pinimg.com/564x/56/3e/ae/563eaee807fcefcbf5e9b86366f912ae.jpg" class="capaimg"><h2>Titre de la capacité</h2><span class="contcapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a sodales lectus, eu luctus augue. Proin volutpat nulla sed ligula tincidunt, eu accumsan urna porttitor. Maecenas pretium nisl eu mi sodales dictum nec sed velit. Fusce faucibus metus lacus, vel dictum orci porta vel. </span><span class="precapa">Aucun</span></div></span></div></div>

CSS

Code:

/* fiche de capacité tog */

.fichcapa001{ width:550px; margin:0 auto; font-family:Verdana; color:#222; font-size:13px; line-height:17px; }
.fichcapa001, .fichcapa001 *{ box-sizing:border-box; }

/* Images et titre */
.headercapa{ width:100%; height:105px; border-radius: 30px 30px 0px 0px; object-fit:cover; }
.fichcapa001 h1{ font-family: 'Oswald', sans-serif; font-weight: bold; font-size: 25px; line-height: 34px; text-align: center; color:#1E5D3A; }

/* Contenu texte */
.paracap{ width:520px; margin:0 auto; background: #E9F2EA; padding:12px; text-align:justify;}

/* Titres onglets */
.titrecapa{ display:flex; justify-content:center; align-items:center;}
.titrecapa span{ display:block; background-color:#2E8B57; width:89px; height:37px; padding:7px; font-family: 'Oswald', sans-serif; color:#fff; text-align:center; font-weight: 600;font-size: 19px; line-height: 20px; text-transform: uppercase; }
.titrecapa .dpb-bloc{ background-color:#1E5E3A; }

/* Onglets contenu */
.ongletscapa{ height:75px; }
.contpis{ width:100%; height:340px; overflow:auto; background-color:#f0f0f0; }

/* Onglets titres de chaque partie */
.tablecapa{ display:flex; justify-content:space-between; }
.tablecapa h2{font-family: 'Oswald', sans-serif; font-weight: 600;font-size: 20px; line-height: 22px;color: #1E5D3A; text-align:center; margin:0px; margin-top:10px; }
.tablecapa .titr1{ width:196px; padding-left:27px; }
.tablecapa .titr2{ width:319px; padding-left:105px; }
.tablecapa .titr3{ width:300px; padding-left:73px;}

/* Chaque capacité */

[class^="qlvl"]{ display:none; }
.fichcapa001 .actif{ display:block;}
.levelcontent{ display:flex; justify-content:center; flex-wrap:wrap; padding:10px; }
.capaimg{ width:30px; height:76px;  object-fit:cover;}
.levelcontent h2{ background-color:#fff; width:92px; height:76px; font-family: 'Oswald', sans-serif; font-size:15px; line-height:18px; padding:10px; color:#222; text-align:center;    display: flex;
    align-items: center;}
.contcapa{ width:275px; height:76px; overflow:auto; padding:5px; text-align:justify; background-color:#fff; font-size:11px; line-height:12px;  }
.precapa{ display:flex; align-items:center; width:110px; height:76px; overflow:auto; font-size:11px; line-height:12px; background-color:#fff; justify-content:center;    margin-left: 6px;}

Javascript

A mettre dans Modules > Pages JS et cocher "sur toutes les pages"

Code:

;( function(){

    $(document).ready( function(){
   
    // par défaut
    $('.titrecapa .lvl1').addClass('dpb-bloc');
    $('.contpis .qlvl1').addClass('actif');
   
        $('body')
          .on('click', '.titrecapa [class^="lvl"]', function(){
                var $this = $(this),
                // on récupére le nom du groupe
                idGroupe = $this.attr('class');

                // On désactive tous les groupes
                $('.titrecapa [class^="lvl"]').removeClass('dpb-bloc');
                $('.contpis [class^="qlvl"]').removeClass('actif');

                // On active le bon groupe
                $('.titrecapa .'+ idGroupe +'').addClass('dpb-bloc');
                $('.contpis .q'+ idGroupe +'').addClass('actif');
            });
 
    });
 
  })($);