Can we show/hide different content in a div without using Select method but just with mouse click?

Question

Is it possible to show/hide different content in a div without using the Select method but just with a mouse click on the div?

For example:

.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>

If I click on the "Option 1" div, it shows everything in "Content 1"

Option 1 -> Content 1

is it possible?

Answer 1

To do this strictly without using JavaScript, you can use a labeled checkbox, but you must modify the tag:

.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

If you don't want to make too many changes to the current markup, you have to use JS. The following example uses data attributes to identify element switches.

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