How can I implement the appearance and hiding of a block in js or jquery?

Question

JavaScript

Hello everyone, I have this script:

$('.floor,.floorcase').click(function() {
$(this).addClass('fade');
});
$(document).mouseup(function (e) {
var container = $('.floor');
if (container.has(e.target).length === 0){
container.removeClass('fade');
}
});

it is necessary that when you click on the button with the floor class, the fade class is added to the element with the floor and floorcase classes, and when you click outside the element with the floor class, the fade class disappears, however, the class does not work,

the class is added only to floor

and not to floorcase

Answer 1

$('.floor').click(function() {
  $('.floor, .floorcase').each(function() {
    $(this).addClass('fade');
  });
});

$(document).mouseup(function(e) {
  const floor = $('.floor');
  const floorcase = $('.floorcase');
  if (floor.has(e.target).length === 0 && floorcase.has(e.target).length === 0) {
    floor.removeClass('fade');
    floorcase.removeClass('fade');
  }
});