How to hide a block?

Question

css

Hello. Tell me how to hide the block (block2), which is displayed on the entire page. But you need to hide it when showing another block (block1), which it overlaps. That is, I pressed the button block1 appeared, block2 disappeared.

Answer 1

Looking at how the block is "hidden"

$('button').on('click', function(){
if($('.block1').is(':visible')){
$('.block1').slideUp(300);
$('.block2').slideDown(300);
}

else{
$('.block1').slideDown(300);
$('.block2').slideUp(300);
}
});