ボタンのonclickイベントを使用して、特定の数のdivを非表示にする方法を探しています。

.toggleClass('.AddCSSClassHere') と関係があるかもしれないことはわかっていますが、実際にはわかりません... div を非表示/表示することはできますが、親 div 固有の div に 1 つ。 jquery は、以前に使用したいと思っていたコード スニペットから来ています。 Hidethis クラス「」を持つすべての div は、[列の表示] ボタンをクリックしたときに表示または非表示にする必要があります

$('button').click(function() { $(this).siblings('div').toggleClass('hidethis '); });

* { マージン: 0; パディング: 0; } html、 体 { 高さ: 100%; } 体 { 背景: #fff; パディング: 0; マージン: 0; フォントファミリー: Myriad-Pro、Arial、「Varela Round」、サンセリフ; フォントサイズ: 16px; } 。引用 { 高さ: 100%; オーバーフロー: 自動; } .main-div { 位置: スティッキー; トップ: 0; } .header-div { ディスプレイ: フレックス; パディング: 5px 0; 背景色: #fff; } .titles { ディスプレイ: フレックス; 幅: 100%; 整列項目: 中央; } .通貨情報 { 幅: コンテンツに合わせて; 最大幅: 100ピクセル; 最小幅: 100ピクセル; テキスト整列: 中央; パディング: 0; } 。情報 { 幅: コンテンツに合わせて; 最大幅: 100ピクセル; 最小幅: 100ピクセル; テキスト整列: 中央; パディング: 10px 0; } 。通貨 { 最大幅: 70ピクセル; 最小幅: 70ピクセル; } .テーブル情報 { ディスプレイ: フレックス; フレックス方向: 行; フレックスラップ: ラップ; 幅: 100%; オーバーフロー-y: スクロール; } .main-div-info { ディスプレイ: フレックス; テキスト整列: 中央; フレックス方向: 行; フレックスラップ: ラップ; 幅: 100%; } .div-info { ディスプレイ: フレックス; フレックス方向: 行; フレックスラップ: ラップ; 幅: 100%; パディング: 10px 0; 整列項目: 中央; } .hidethis { 表示: なし。 }

 <セクションクラス="引用"> 
 
 
 
 列を表示 
 
 
 
 
ローカル
 
 
 
 
 
 
 
 
 
 
製品名
 
ID
 
数量
 
期間
 
 
 
単価
 
単価
 
ユニット割引
 
 
 
 
 
 
 
 ;フルスロットル
 
 
 
1.0
 
1.0
 
USD
 
37.50
 
0.0
 
0.0