I wish to do an Hide and show on Divs, with jquery. How can I do this?

Asked

Viewed 48 times

2

I wish to make a kind of Hide and show on Divs, with jquery. However, changes are not made in the case of round trip.

$(function() {

  $('#red').click(function() {
    $('.red').css('display', 'block');
    $('.blue').css('display', 'none');
    $('.green').css('display', 'none');
  })

  $('#blue').click(function() {
    $('.red').css('display', 'none');
    $('.blue').css('display', 'block');
    $('.green').css('display', 'none');
  })

  $('#green').click(function() {
    $('.red').css('display', 'none');
    $('.blue').css('display', 'none');
    $('.green').css('display', 'block');
  })

})
.red {
  width: 32px;
  height: 32px;
  background-color: red;
}

.blue {
  width: 32px;
  height: 32px;
  background-color: blue;
  display: none;
}

.green {
  width: 32px;
  height: 32px;
  background-color: green;
  display: none;
}

.links {
  display: inline-block;
  margin-top: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    titulo
  </title>
  <script src="jv/java.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="jv/jquery-3.5.1.js"></script>
  <script type="text/javascript" src="jv/functions.js"></script>
</head>

<body>
  <div class="red">
    <div class="links">
      <a href="#" id="red">red</a>
      <a href="#" id="blue">blue</a>
      <a href="#" id="green"> green</a>
    </div>
  </div>
  <!-- red -->

  <div class="blue">
    <div class="links">
      <a href="#" id="red">red</a>
      <a href="#" id="blue">blue</a>
      <a href="#" id="green"> green</a>
    </div>
  </div>
  <!-- blue -->

  <div class="green">
    <div class="links">
      <a href="#" id="red">red</a>
      <a href="#" id="blue">blue</a>
      <a href="#" id="green"> green</a>
    </div>
    <!-- green -->
</body>

</html>

jquery
  • 1

    You’re repeating the same id for several elements on the same page, and this is not advisable as you can see here: https://answall.com/questions/318255/por-que%C3%A9-considered-wrong-bad-repeat-an-id-in-html#:~:text=%C3%89%20wrong%20because%20est%C3%A1%20na,sense%20de%20realmente%20ser%20obrigat%C3%B3rio).

  • You made a lot of sense, man. Thank you very much.

1 answer

0

We have two ways to deal with this problem, so let’s go

First:

Let’s create a class in our css

    .hide{ 
        display: none; 
    }

And in jquery

    $("#red").click( ()=> {
       $(this).toggleClass("hide");
    });

This can be used for all its elements only by changing the $("#idDoElemento"), it will put or remove the class that hides the elements, without you having to rewrite all the same things all the time.

Second:

It’s not very elegant, and I wouldn’t advise it, but it solves your problem.

    $("#red").click( ()=> {
       $(this).show();
       $('.red').hide();
       /* Todos os elementos que você quer esconder */
    });

If you are a beginner, I leave the observation that it is not very advisable to learn Jquery in 2020, it is more profitable to go to vanila.js

Material: https://developer.mozilla.org/en-US/docs/Aprender/Getting_started_with_the_web/JavaScript_basico

  • Got it, man, and thanks for the tip.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.