How do I make with .fadeToggle () make several elements appear?

Question

How do I make with .fadeToggle () make several elements appear?

Navigation

#1 by (1 votes)

0

The thing is that I wanted to click on a "button" (I put it in quotes because it's just a button in appearance) different options are displayed.

This I do with the animation of Jquery .fadeToggle()

Why is only the first option displayed to me? How do I show them all? (In this case they are all 2).

Code:

$(document).ready(function() {

  $('#Btn-Selector-Rutina').click(function() {
    $('#Btn-Subselector-Rutina').fadeToggle();
  });
});

.Btn-Selector {
  height: auto;
  width: 200px;
  padding: 5px;
  text-align: center;
  margin: auto;
  border: solid 2px;
  border-color: #21211d;
  cursor: pointer;
}

#Btn-Subselector-Rutina {
  display: none;
  border-top-style: none;
}

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

<div id="Selector-Rutina">
  <p class="Btn-Selector" id="Btn-Selector-Rutina">Tipo de rutina</p>

  <p class="Btn-Selector" id="Btn-Subselector-Rutina">Rutina 1</p>
  <p class="Btn-Selector" id="Btn-Subselector-Rutina">Rutina 2</p>
</div>

jquery

asked by NEA 21.10.2017 в 18:18

source

1 answer

the identifier has already been declared Math class does not work [closed]

score 1 · Accepted Answer

Good, it is wrong to use two elements with the same ID since only the first element that contains the specified ID will be recognized. I recommend using Class or a custom attribute in these cases.

On the other hand, to refer to many elements with a Class or an attribute or elements of the same type, you can use $.each() , although if they were elements with different names, you can use $(#id, elemento, .class, otro).on(...) .

I'll give you an example:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">

        .Btn-Selector {
          height: auto;
          width: 200px;
          padding: 5px;
          text-align: center;
          margin: auto;
          border: solid 2px;
          border-color: #21211d;
          cursor: pointer;
        }

        .Btn-Selector:not(#Btn-Selector-Rutina) {
          display: none;
          border-top-style: none;
        }

    </style>
    <script type="text/javascript">
        $(document).ready(function() {

          $('#Btn-Selector-Rutina').click(function() {
            $.each($('.Btn-Selector:not(#Btn-Selector-Rutina)'), function() {
                $(this).fadeToggle();
            });
          });

        });
    </script>
</head>
<body>

    <div id="Selector-Rutina">
        <p class="Btn-Selector" id="Btn-Selector-Rutina">Tipo de rutina</p>
        <p class="Btn-Selector">Rutina 1</p>
        <p class="Btn-Selector">Rutina 2</p>
    </div>

</body>
</html>