Continually hide different elements depending on classes of another set of elements

Question

I have a set of menu elements <a> and a set of div elements (each containing to a django template. Currently have logic that switches an "active" class between the menu elements depending on which is clicked (highlighting that clicked menu item). Would like to have it so that only the django template corresponding to the "active" menu item is visible at any time. The existing code looks like this (it currently only changes which menu item has the "active" class):

<!-- top menu color activation -->
    <script>
        menu = {};

        // ready event
        menu.ready = function() {

          // selector cache
          var
            $menuItem = $('.menu a.item, .menu .item, .menu .link.item'),
            // alias
            handler = {
              activate: function() {
                $(this)
                .addClass('active')
                .closest('.ui.menu')
                .find('.item')
                .not($(this))
                .removeClass('active');
              }
            }
          ;

          $menuItem
            .on('click', handler.activate)
          ;

        };


        // attach ready event
        $(document).ready(menu.ready);

    </script>

    <!-- top menu (note, using semantic UI) -->
    <div class="ui container">
        <div class="ui large secondary red pointing menu">
            <a class="toc item">
                <i class="sidebar icon"></i>
            </a>
            <a class="active item">item-1</a>
            <a class="item">item-2</a>
            <a class="item">item-3</a>

            <div class="right menu item">
                <div class="ui simple dropdown">
                    More
                    <i class="dropdown icon"></i>
                    <div class="ui menu">
                        <a class="item"><i class="globe icon"></i> Choose Language</a>
                        <a class="item"><i class="settings icon"></i> Log Out</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- including corresponding django templates (currently all visible) -->
    <!-- would like only item-1.html to be visible when menu item 1 is active and similarly for the other templates here -->
    <div>{% include "testapp/item-1.html" %}</div>
    <div>{% include "testapp/item-2.html" %}</div>
    <div>{% include "testapp/item-3.html" %}</div>

What I am not able to figure out is how to hide which django template is currently visible at any given time corresponding to the currently active menu item (eg. user clicks the item-1 menu item, then only the item-1.html django template should be visible).

How can I get this bit of functionality using jQuery? Very new to JS for front-end web page stuff and would appreciate any longer explanation of anything not obvious in the wording of the code.

Answer 1

I wrote your code in a shorter and more readable way.

$(document).ready(function(){
  var item = $('.menu .item');
  item.on("click",function(){
    item.removeClass("active");
    $(this).addClass("active");
  });
});

The code above does the exact same thing as your code.

---

Edit
Now to show a particular div based on that menu click, you should add a class to your "templates" and a data attribute, which is readable using .data()

$(document).ready(function(){

  // Click handler.
  var item = $('.menu .item');
  item.on("click",function(){

    // Add the active class.
    item.removeClass("active");
    $(this).addClass("active");

    // Show the right Django template.
    var id = $(this).data("id");
    if(id!="" && typeof(id)!="undefined"){
      $(".template").hide();
      $(".template[data-id='"+id+"']").show();
    }
  }); // End click.

  // On load, only show the first template
  $(".template").hide();
  $(".template[data-id='1']").show();

}); // end ready.

.active{
  color:red;
}
.template{
  width:20em;;
  height: 8em;
  border: 1px solid black;
  box-shadow:inset 0 0 3em #fff;
  margin:1em;
}
.template:nth-child(3){
  background-color:#6AA;
}
.template:nth-child(4){
  background-color:#A6A;
}
.template:nth-child(5){
  background-color:#AA4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ui container">
  <div class="ui large secondary red pointing menu">
    <a class="toc item">
      <i class="sidebar icon"></i>
    </a>
    <a class="active item" data-id="1">item-1</a>
    <a class="item" data-id="2">item-2</a>
    <a class="item" data-id="3">item-3</a>

    <div class="right menu item">
      <div class="ui simple dropdown">
        More
        <i class="dropdown icon"></i>
        <div class="ui menu">
          <a class="item"><i class="globe icon"></i> Choose Language</a>
          <a class="item"><i class="settings icon"></i> Log Out</a>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="template" data-id="1">item-1.html</div>
<div class="template" data-id="2">item-2.html</div>
<div class="template" data-id="3">item-3.html</div>