Comment masquer certains divs en cliquant sur un bouton ?

Question

Je cherche un moyen de masquer un certain nombre de divs en utilisant l'événement bouton onclick.

Je sais que cela pourrait avoir quelque chose à voir avec .toggleClass('.AddCSSClassHere') mais je ne suis pas vraiment sûr... Je peux masquer/afficher un div mais pas le un dans le div spécifique au div parent. jquery vient d'un extrait de code que je voulais utiliser plus tôt. Tous les div avec la classe hidethis "" doivent être affichés ou masqués lorsque vous cliquez sur le bouton "Afficher les colonnes"

$('button').click(function() {
  $(this).siblings('div').toggleClass('hidethis ');
});
* {
  marge : 0 ;
  remplissage : 0 ;
}

HTML,
corps {
  hauteur : 100 % ;
}

corps {
  arrière-plan : #fff ;
  remplissage : 0 ;
  marge : 0 ;
  famille de polices : Myriad-Pro, Arial, "Varela Round", sans-serif ;
  taille de police : 16 px ;
}

.citation {
  hauteur : 100 % ;
  débordement : automatique ;
}

.main-div {
  position : collante ;
  haut : 0 ;
}

.header-div {
  affichage : flexible ;
  remplissage : 5px 0 ;
  couleur d'arrière-plan : #fff ;
}

.titres {
  affichage : flexible ;
  largeur : 100 % ;
  align-items : centre ;
}

.currencyinfo {
  largeur : ajustement du contenu ;
  largeur maximale : 100 px ;
  largeur minimale : 100 px ;
  alignement du texte : centre ;
  remplissage : 0 ;
}

.Info {
  largeur : ajustement du contenu ;
  largeur maximale : 100 px ;
  largeur minimale : 100 px ;
  alignement du texte : centre ;
  remplissage : 10px 0 ;
}

.devise {
  largeur maximale : 70 px ;
  largeur minimale : 70 px ;
}

.table-info {
  affichage : flexible ;
  direction flexible : rangée ;
  flex-wrap : envelopper ;
  largeur : 100 % ;
  overflow-y : défilement ;
}

.main-div-info {
  affichage : flexible ;
  alignement du texte : centre ;
  direction flexible : rangée ;
  flex-wrap : envelopper ;
  largeur : 100 % ;
}

.div-info {
  affichage : flexible ;
  direction flexible : rangée ;
  flex-wrap : envelopper ;
  largeur : 100 % ;
  remplissage : 10px 0 ;
  align-items : centre ;
}

.cache ça {
  affichage : aucun ;
}



  

    

      

        

          afficher les colonnes
        
        

        

        

        
Local
        

        

        

      
    
  

  

    

      

        
Nom du produit
        
ID
        
Quantité
        
Périodes
        
 
        
Prix unitaire
        
Coût unitaire
        
Remise unitaire
      
    
  
  

    

      

        
 ;Plein gaz
        
 
        
1.0
        
1.0
        
USD
        
37,50
        
0.0
        
0.0
      
    
  

Answer 1

Vous devez monter d'un niveau pour trouver l'élément cible en tant que frère ou sœur. L'indentation du contenu des éléments au niveau du bloc permet une meilleure visualisation.

Si vous souhaitez basculer tous ces éléments dans tous les conteneurs, vous devez introduire une nouvelle classe pour en garder une trace lorsque la classe est supprimée, ou les sélectionner tous et utiliser la liste des éléments.

$(function() {
  const elsToToggle = $('.hidethis');

  $('.show-this-data').click(function() {
    $(this).parent().siblings('div').toggleClass('hidethis ');
  });

  $('.show-all-data').click(function() {
    elsToToggle.toggleClass('hidethis');
  });
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #fff;
  padding: 0;
  margin: 0;
  font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif;
  font-size: 16px;
}

.quotation {
  height: 100%;
  overflow: auto;
}

.main-div {
  position: sticky;
  top: 0;
}

.header-div {
  display: flex;
  padding: 5px 0;
  background-color: #fff;
}

.titles {
  display: flex;
  width: 100%;
  align-items: center;
}

.currencyinfo {
  width: fit-content;
  max-width: 100px;
  min-width: 100px;
  text-align: center;
  padding: 0;
}

.info {
  width: fit-content;
  max-width: 100px;
  min-width: 100px;
  text-align: center;
  padding: 10px 0;
}

.currency {
  max-width: 70px;
  min-width: 70px;
}

.table-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  overflow-y: scroll;
}

.main-div-info {
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.div-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0;
  align-items: center;
}

.hidethis {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="quotation">

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="currencyinfo product-title">
          <button class="show-this-data">show columns in this block</button>
          <button class="show-all-data">show columns in all blocks</button>
        </div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo hidethis" style="border-left: 1px solid #bdbdbd;">Local</div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
      </div>
    </div>
  </div>

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title">Product name</div>
        <div class="info">ID</div>
        <div class="info">Quantity</div>
        <div class="info">Periods</div>
        <div class="info hidethis">&nbsp;</div>
        <div class="info hidethis">Unit Price</div>
        <div class="info hidethis">Unit Cost</div>
        <div class="info hidethis">Unit Discount</div>
      </div>
    </div>
  </div>
  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title"><i class="fa fa-chevron-down rotate" aria-hidden="true"></i><a href="#">Full Throttle</a></div>
        <div class="info">&nbsp;</div>
        <div class="info">1.0</div>
        <div class="info">1.0</div>
        <div class="info hidethis">USD</div>
        <div class="info hidethis">37.50</div>
        <div class="info hidethis">0.0</div>
        <div class="info hidethis">0.0</div>
      </div>
    </div>
  </div>
</section>