How do I use JQuery to show a corresponding div and hide others?

Question

How do I add the class of active to just the corresponding info div when clicking on each item div. So, click on Food, the info window for food is displayed. All others are hidden etc. In my project, my info div is not the next thing in the DOM as it is nested in another place. I have seen the data-* but don' data-t know how to use it.

<div class="item">Food</div>
<div class="item">Music</div>
<div class="item">Transport</div>

<div class="info active">
    <h2>All about Food</h2>
    <p>Food is by far the best invention</p>
</div>

<div class="info">
    <h2>All about Music</h2>
    <p>Music is the best</p>
</div>

<div class="info">
    <h2>All about Transport</h2>
    <p>Cars, planes & trains</p>
</div>

I only have the below which adds active to all.

$(function() {
    $('.item').on('click', function() {
        $('.info').addClass('active');
    });
});

Answer 1

One option is to add data attributes to your elements and use them to tie your items to the corresponding info divs:

 $('.item').click(function() { $('.info').removeClass('active'); $('.info[data-info="' + $(this).data('item') + '"]').addClass('active'); }) 

 .info.active { display: block; } .info { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-item="food" class="item">Food</div> <div data-item="music" class="item">Music</div> <div data-item="transport" class="item">Transport</div> <div data-info="food" class="info active"> <h2>All about Food</h2> <p>Food is by far the best invention</p> </div> <div data-info="music" class="info"> <h2>All about Music</h2> <p>Music is the best</p> </div> <div data-info="transport" class="info"> <h2>All about Transport</h2> <p>Cars, planes & trains</p> </div> 

Answer 2

<div class="item" data-showid="food">Food</div>
<div class="item" data-showid="music">Music</div>
<div class="item" data-showid="transport">Transport</div>

<div class="info" id="food">
    <h2>All about Food</h2>
    <p>Food is by far the best invention</p>
</div>

<div class="info" id="music">
    <h2>All about Music</h2>
    <p>Music is the best</p>
</div>

<div class="info" id="transport">
    <h2>All about Transport</h2>
    <p>Cars, planes & trains</p>
</div>

JS

$(document).ready(function(){
 $(document).on("click",".item", function(){
   $(".info").hide();
   $("div#"+$(this).attr("data-showid")).show();
 });
});

You can use this script. Hide all info div first then show the relevant div using data-showid attribute.

Answer 3

You can do it like this:

$(function() {
  $('.item').on('click', function() {
    $(".info.active").add('#' + $(this).attr('data-id')).toggleClass('active');
  });
});

demo

 $(function() { $('.item').on('click', function() { $(".info.active").add('#' + $(this).attr('data-id')).toggleClass('active'); }); }); 

 .info { display: none } .info.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item" data-id="Food">Food</div> <div class="item" data-id="Music">Music</div> <div class="item" data-id="Transport">Transport</div> <div id="Food" class="info active"> <h2>All about Food</h2> <p>Food is by far the best invention</p> </div> <div id="Music" class="info"> <h2>All about Music</h2> <p>Music is the best</p> </div> <div id="Transport" class="info"> <h2>All about Transport</h2> <p>Cars, planes & trains</p> </div>