Bolehkah kita menunjukkan/menyembunyikan kandungan berbeza dalam div tanpa menggunakan kaedah Pilih tetapi hanya dengan klik tetikus?

Question

Adakah mungkin untuk menunjukkan/menyembunyikan kandungan berbeza dalam div tanpa menggunakan kaedah Pilih tetapi hanya dengan klik tetikus pada div?

Contohnya:

.inv{
  display: none;
}

<div class="inv">
 
  <div> Option 1 </div>
  <div> Option 2 </div>
  <div> Option 3 </div>
 
  <div class="inv">Content 1</div>
  <div class="inv">Content 2</div>
  <div class="inv">Content 3</div>

</div>

Jika saya mengklik pada div "Pilihan 1", ia menunjukkan segala-galanya dalam "Kandungan 1"

Pilihan 1 -> Adakah boleh?

Answer 1

Untuk melakukan ini dengan ketat tanpa menggunakan JavaScript, anda boleh menggunakan kotak pilihan dengan label, tetapi anda perlu mengubah suai label:

.inv {
  display: none;
}

label{
  display: block;
}

input {
  display: none;
}

input:checked + .inv{
  display: block !important;
}

 Option 1 
 Option 2 
 Option 3 


Content 1

Content 2

Content 3

Jika anda tidak mahu membuat terlalu banyak perubahan pada markup semasa, anda perlu menggunakan JS. Contoh berikut menggunakan atribut data untuk mengenal pasti suis elemen.

$('div[data-for]').click(function() {
  $(`.inv[data-id="${this.dataset.for}"]`).toggle()
})

.inv {
  display: none;
}

sssccc
 Option 1 
 Option 2 
 Option 3 

Content 1
Content 2
Content 3