Optimized javascript snippet writing (semantics)

Question

Hello, everybody!

I would like to know the correct way to write this simple Javascript excerpt:

By clicking on the div ". plus", all the Divs ". contents" are expanding.

What is the correct writing semantics so that a click on the div ". plus" of the id="languages" does not execute the action on the div ". id="code" and "frameworks" content and vice versa.

$(".mais").click(function() {
  $(".mais").fadeOut()
  $(".menos").css("display", "flex")
  $(".conteudo").css("max-height", "60rem")
});

$(".menos").click(function() {
  $(".menos").fadeOut()
  $(".mais").css("display", "flex")
  $("#conhecimentos .conteudo").css("max-height", "0")
});

<div id="linguagens">
  <div class="titulo">
    <h2>Linguagens</h2>
    <div class="expand">
      <div class="mais">
      </div>
      <div class="menos">
      </div>
    </div>
  </div>
  <div class="conteudo">
    <p>exemplo
    <br>exemplo
    <br>exemplo
    <br>exemplo</p>
  </div>
</div>
<div id="codigos">
  <div class="titulo">
    <h2>Codigos</h2>
    <div class="expand">
      <div class="mais">
      </div>
      <div class="menos">
      </div>
    </div>
  </div>
  <div class="conteudo">
    <p>exemplo
    <br>exemplo
    <br>exemplo
    <br>exemplo</p>
  </div>
</div>
<div id="frameworks">
  <div class="titulo">
    <h2>Frameworks</h2>
    <div class="expand">
      <div class="mais">
      </div>
      <div class="menos">
      </div>
    </div>
  </div>
  <div class="conteudo">
    <p>exemplo
    <br>exemplo
    <br>exemplo
    <br>exemplo</p>
  </div>
</div>

Answer 1

You can use the element with the class .expand to find the other plus/minus in combination with the .closest.

Another option is to use the .siblings jQuery to find the other element, assuming that there are only 2 elements descended from .expand: one .mais and a .menos.

In that case the code could look like this:

$(".mais, .menos").click(function() {
  $(this).fadeOut().siblings().css("display", "flex");
  var abrir = $(this).hasClass('mais');
  $(this).closest('.titulo').next().css("max-height", abrir ? "60rem" : "0");
});

.conteudo {
  max-height: 0rem;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linguagens">
  <div class="titulo">
    <h2>Linguagens</h2>
    <div class="expand">
      <div class="mais">
      </div>
      <div class="menos">
      </div>
    </div>
  </div>
  <div class="conteudo">
    <p>exemplo
      <br>exemplo
      <br>exemplo
      <br>exemplo</p>
  </div>
</div>
<div id="codigos">
  <div class="titulo">
    <h2>Codigos</h2>
    <div class="expand">
      <div class="mais">
        +
      </div>
      <div class="menos">
        -
      </div>
    </div>
  </div>
  <div class="conteudo">
    <p>exemplo
      <br>exemplo
      <br>exemplo
      <br>exemplo</p>
  </div>
</div>
<div id="frameworks">
  <div class="titulo">
    <h2>Frameworks</h2>
    <div class="expand">
      <div class="mais">
        +
      </div>
      <div class="menos">
        -
      </div>
    </div>
  </div>
  <div class="conteudo">
    <p>exemplo
      <br>exemplo
      <br>exemplo
      <br>exemplo</p>
  </div>
</div>

Answer 2

This happens because of the hierarchy of the HTML structure,

If your HTML is fixed, I mean its structure, you can use something similar to this:

$(".mais").click(function(e) {
  $(this).hide();
  $(this.parentElement.children[1]).fadeIn();
  $(this.parentElement.parentElement.parentElement.children[1]).css("max-height", "60rem");
  $(this.parentElement.parentElement.parentElement.children[1]).fadeIn();
});

$(".menos").click(function() {
  $(this).hide();
  $(this.parentElement.parentElement.parentElement.children[1]).hide();
  $(this.parentElement.children[0]).fadeIn();
});

This link has a functional example

https://jsfiddle.net/jvt9g8a4/