Can we show/hide different content in one div without using Select Method instead by just simple mouse click?

Question

Is it possible to show/hide different content in one div without using Select Method instead by just simple mouse click on 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 'Option 1' div it show me the all content in 'Content 1'

Option 1 -> Content 1

Is it possible?

Answer 1

To do it strictly without JavaScript , you can use checkboxes with labels, although you would have to modify your markup:

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

 <label for="one"> Option 1 </label> <label for="two"> Option 2 </label> <label for="three"> Option 3 </label> <input type="checkbox" id="one"> <div class="inv">Content 1</div> <input type="checkbox" id="two"> <div class="inv">Content 2</div> <input type="checkbox" id="three"> <div class="inv">Content 3</div>

If you don't want to change the current markup too much, you'll have to use JS. The following example uses data attributes to identify the elements to toggle.

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

 .inv { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-for="one"> Option 1 </div> <div data-for="two"> Option 2 </div> <div data-for="three"> Option 3 </div> <div class="inv" data-id="one">Content 1</div> <div class="inv" data-id="two">Content 2</div> <div class="inv" data-id="three">Content 3</div>