<p>Saya sedang mencari cara untuk menyembunyikan bilangan div tertentu dengan menggunakan acara butang onclick. </p> <p>Saya tahu ia mungkin ada kaitan dengan <code>.toggleClass('.AddCSSClassHere')</code> tetapi saya tidak begitu pasti... saya boleh menyembunyikan/menunjukkan div tetapi tidak satu dalam div khusus div induk. jquery berasal daripada coretan kod yang saya mahu gunakan sebelum ini. Semua div dengan kelas hidethis "" perlu ditunjukkan atau disembunyikan apabila mengklik butang "Tunjukkan Lajur"</p> <p> <pre class="brush:js;toolbar:false;">$('button').klik(function() { $(this).siblings('div').toggleClass('hieththis '); });</pre> <pre class="brush:css;toolbar:false;">* { margin: 0; padding: 0; } html, badan { ketinggian: 100%; } badan { latar belakang: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; saiz fon: 16px; } .petikan { ketinggian: 100%; limpahan: auto; } .main-div { kedudukan: melekit; atas: 0; } .header-div { paparan: flex; pelapik: 5px 0; warna latar belakang: #fff; } .titles { paparan: flex; lebar: 100%; align-item: tengah; } .currencyinfo { lebar: muat-kandungan; lebar maksimum: 100px; lebar min: 100px; text-align: tengah; padding: 0; } .info { lebar: muat-kandungan; lebar maksimum: 100px; lebar min: 100px; text-align: tengah; pelapik: 10px 0; } .currency { lebar maksimum: 70px; lebar min: 70px; } .table-info { paparan: flex; flex-direction: baris; flex-wrap: bungkus; lebar: 100%; limpahan-y: tatal; } .main-div-info { paparan: flex; text-align: tengah; flex-direction: baris; flex-wrap: bungkus; lebar: 100%; } .div-info { paparan: flex; flex-direction: baris; flex-wrap: bungkus; lebar: 100%; pelapik: 10px 0; align-item: tengah; } .sembunyikan ini { paparan: tiada; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integriti ="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous"no-refererpolicy" <section class="quotation"> <div class="main-div"> <div class="header-div"> <div class="titles"> <div class="currencyinfo product-title"> <button class="show-this-data">tunjukkan lajur</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 hidetthis"></div> <div class="currencyinfo hidetthis"></div> <div class="currencyinfo hidetthis"></div> </div> </div> </div> <div class="main-div"> <div class="header-div"> <div class="titles"> <div class="info product-title">Nama produk</div> <div class="info">ID</div> <div class="info">Kuantiti</div> <div class="info">Tempoh</div> <div class="info hidetthis">&nbsp;</div> <div class="info hidethis">Harga Seunit</div> <div class="info hidethis">Kos Unit</div> <div class="info hidethis">Diskaun Unit</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="#"> ;Pendikit Penuh</a></div> <div class="info">&nbsp;</div> <div class="info">1.0</div> <div class="info">1.0</div> <div class="info hidetthis">USD</div> <div class="info hidetthis">37.50</div> <div class="info hidetthis">0.0</div> <div class="info hidetthis">0.0</div> </div> </div> </div> </section></pre> </p>

$(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>