Discussion :

[sylvain257]

Bonjour,

Pour contourner le pb évoqué dans un autre post, je souhaite créer une sidebar collapsible comme dans l'exemple suivant

https://codepen.io/joshadamous/pen/MWxeyB

Problème : ce code date de presque 10 ans avec des versions de bootstrap et de jquery obsolètes.

J'aimerais pouvoir adapter ce code avec des versions plus récentes et Materialize.

Est ce que qqun aurait une idée de comment faire ?

Merci pour vos retours

Sylvain


MAJ 13:41 : j'en suis là. C'est le JS qui pêche là.

https://codepen.io/sylvain258/pen/bGOOJNg?editors=1111

[ASCIIDEFOND]

Salut sylvain257,

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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>