Simple menu with descriptions If one menu-item is clicked then the description with the same data-filter attribute should be shown.

I added a class to the description elements to associate each one with the affiliated menu item.

What do you think?



$(".button").click(function() {
  $(".button").removeClass("active-filter");
  $(this).addClass("active-filter");

  var button = $(this).attr("data-filter");
  var active_element = $('.descr[data-filter="' + button + '"]');

  $(".descr").removeClass("active-element");
  active_element.addClass("active-element");
});
.element {
  display: inline-block;
  background-color: lightgreen;
  width: 220px;
}

.filter {
  display: inline-block;
  margin: 10px;
  background-color: orange;
}

.button {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.descr {
  display: block;
  max-height: 0;
  visibility: hidden;
  background-color: lightgrey;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 10px;
}

.data-element {
  height: 60px;
  display: block;
  background-color: orange;
  margin: 10px;
  position: relative;
}

.active-filter {
  background-color: yellow;
  display: block;
}

.active-element {
  background-color: yellow;
  max-height: 100%;
  visibility: visible;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="element"&gt;
  &lt;div class="filter"&gt;
    &lt;div class="button active-filter" data-filter="3"&gt;data-filter 1&lt;/div&gt;
    &lt;div class="button" data-filter="4"&gt;data-filter 2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="data-element"&gt;
    &lt;div class="descr active-element" data-filter="3"&gt;data-element 1&lt;/div&gt;
    &lt;div class="descr" data-filter="4"&gt;data-element 2&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
One purpose for using jQuery is the ability to chain methods. You can first remove the "active-element" class from .d, then utilize .filter() with a single line passed as parameter within a template literal which removes the "active-filter" class from .b elements, filters and adds the same class to this element, and concludes by returning the .data() of the current element, which is the attribute value selector to match the corresponding .d element where the "active-element" class is added.



$(".b").click(function(e) {
  $(".d").removeClass("active-element")
  .filter(`[data-filter='${
    $(".b").removeClass("active-filter")
    .filter(this).addClass("active-filter")
    .data().filter
   }']`)
  .addClass("active-element");
});
.b {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.c {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.element {
  float: left;
  display: block;
}

.active-filter {
  background-color: pink;
}

.active-element {
  background-color: yellow;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="element"&gt;
  &lt;div&gt;
    &lt;div class="b active-filter" data-filter="3"&gt;data-filter&lt;/div&gt;
    &lt;div class="b" data-filter="4"&gt;data-filter&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;div class="c d" data-filter="3"&gt;data-element&lt;/div&gt;
    &lt;div class="c d" data-filter="4"&gt;data-element&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;