Optimized excerpt writing in javascript (semantics)

Question

Optimized excerpt writing in javascript (semantics)

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Hello, everyone!

I would like to know the correct way to write this simple snippet of JavaScript:

When you click on the ".more" div, all the ".content" divs are expanding.

What is the correct semantics of writing so that a click on the ".more" div of the id="languages" does not execute the action on the ".conteudo" div of "ids" and "frameworks" 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>

javascript jquery

asked by anonymous 14.12.2016 / 00:14

2 answers

2

You can use the element with class .expand to look for the other more / less in combination with .closest .

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

In this 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><divid="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>

14.12.2016 / 07:39

Select hibernate criteria with unmapped entity Bootstrap Jquery error

score 0 · Accepted Answer

This happens because of the HTML structure hierarchy,

If your HTML is fixed, I say the structure of it, 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 working example

link