При нажатии на span должны удаляться другие елементы хэдера

Есть логотип и контакты, а также меню-кнопка. При нажатии на этот menu span должен исчезнуть логотип и контакты. При нажатии на close должны появиться обратно. Как это реализовать без hide и show? Ниже немного кода без стилей. Буду также рада наводкам.

       <div class="header">
            <a class="logo">
                <div><img class="bottom-icon" src="">logo<img class="top-icon" src=""></div>
            </a>
            <span class="menu">Menu</span>
            <div class="contacts">
                <div class="contacts-location">street, France</div>
                <a class="contacts-number" href="tel:+111111" style="color:#1C150B;">+1111111</a>
            </div>
        </div>
       <div class="section section-menu"></div>

         $('.header span').click(function() {
         $(this).toggleClass("active");
         $('.section-menu').toggleClass('section-menu-visible');
         if ( $(this).hasClass("active")) {
           $('.header').addClass('header-no-color');
           $(this).text("Close");
         } else {
           $(this).text("Menu");
           setTimeout(function(){
            $('.header').removeClass('header-no-color');
          },750);
         }
       });