I made this function to hide the divs that are not the color of the button wording. Nothing seems to happen when I press the button, no class is hidden. I already linked the js into the html file. It I tried adding toggleClass with a class that is visibility:hidden but it doesnt seem to work as well. I think there could be the problem with the button

$(document).ready(function() {

  $('#option_blue').click(function() {

    $('.red', '.yellow').toggle();

  })
})

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}

.blue {
  height: 100px;
  width: 100px;
  background-color: blue;
}

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

.yellow {
  height: 100px;
  width: 100px;
  background-color: yellow;
}


/*The style for my element boxes*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="option_blue">blue</button>
<div class="flex">

  <div class="blue">
    <!--The divs are boxes containing content -->
  </div>

  <div class="red">
  </div>

  <div class="yellow">
  </div>

  <div class="blue">
  </div>

  <div class="red">
  </div>

  <div class="yellow">
  </div>

</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The selector must be on unique string, the comma is inside the string selector: documentation link.

$('.red, .yellow').toggle();

$(document).ready(function() {
  $('#option_blue').click(function() {
    $('.red, .yellow').toggle();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="option_blue">blue</button>
<div class="flex">

  <div class="blue">
    <!--The divs are boxes containing content -->
  </div>

  <div class="red">
    red
  </div>

  <div class="yellow">
    yellow
  </div>

  <div class="blue">
    blue
  </div>

  <div class="red">
    red
  </div>

  <div class="yellow">
    yellow
  </div>

</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>