Création sidebar collapsible

Salut sylvain257,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    .tab-content {
      margin-left: 45px;
      border: 1px solid black;
      border-radius: 4px;
      background-color: white;
      width: 400px;
      max-width: 400px;
      height: 500px;
      /* display: none */
    }
 
    .tab-pane {
      display: none;
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script>
    $('.tab').on('click', function () {
      // On crée une variable en remplaçant "tab par #panel" qui correspondra à l'élément à afficher
    let tabSelect = this.id.replace('tab', '#panel');
 
      //Ici on boucle les éléments qui ont une class 'tab-pane' et on supprime la class 'active' qui serait présente
      for (const elem of document.getElementsByClassName('tab-pane')) {
        elem.classList.remove('active')
      }
 
      // on ajoute la class 'active' à l'ID correspondant à tabSelect 
      $(tabSelect).addClass('active');
    })
  </script>