Hide the header content when the menu is opened

Question

Hide the header content when the menu is opened

I am trying to create a function where clicking on a button will toggle the visibility of an element - hiding it when clicked once and showing it again when clicked again. I attempted to implement this using jQuery, but as I am new to Javascript, I can't figure out why it's not working.

$('#menuBtn').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    $('.header-text').css({
      'display': 'none'
    });
  } else {
    $('.header-text').css({
      'display': 'block'
    });
  }
  $(this).data("clicks", !clicks);
});

javascript jquery html css

Answer 1

Answer №1

For a smooth transition effect, you can utilize the toggle or slideToggle function with animation

$('#menuBtn').on('click', function() {
    $('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
    $('.header-text').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>

<div class="header-text">
This content should be displayed and hidden accordingly
</div>

Answer 2

For a smooth transition effect, you can utilize the toggle or slideToggle function with animation

$('#menuBtn').on('click', function() {
    $('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
    $('.header-text').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>

<div class="header-text">
This content should be displayed and hidden accordingly
</div>

Answer 3

Answer №2

To hide text, you can add a modifier class to an external stylesheet and toggle it using the toggleClass method.

Tip: Instead of using toggle, which injects inline CSS, it's better to use toggleClass for easy overrides in the future.

const $headerText = $('.header-text');

$('#menuBtn').click(function() {
  $headerText.toggleClass('header-text--hidden');
});

.header-text--hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="menuBtn" type="button">Toggle</button>

<header>
  <p class="header-text">Text 1</p>
  <p class="header-text">Text 2</p>
  <p class="header-text">Text 3</p>
  <p class="header-text">Text 4</p>
</header>

Answer 4

To hide text, you can add a modifier class to an external stylesheet and toggle it using the toggleClass method.

Tip: Instead of using toggle, which injects inline CSS, it's better to use toggleClass for easy overrides in the future.

const $headerText = $('.header-text');

$('#menuBtn').click(function() {
  $headerText.toggleClass('header-text--hidden');
});

.header-text--hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="menuBtn" type="button">Toggle</button>

<header>
  <p class="header-text">Text 1</p>
  <p class="header-text">Text 2</p>
  <p class="header-text">Text 3</p>
  <p class="header-text">Text 4</p>
</header>

Answer 5

Answer №3

Who needs jQuery when you can do this without it?

All you have to do is add a CSS rule to make .hidden set to display: none and then use toggle that class when the button is clicked.

To capture the click event on the button, you'll need a click event listener

const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');

toggle.addEventListener('click', () => {
  header.classList.toggle('hidden')
});

.header {
  background: red;
  height: 3em;
}

.hidden {
  display: none;
}

<header class="header"></header>
<button class="menu-toggle">Click me!</button>

Answer 6

Who needs jQuery when you can do this without it?

All you have to do is add a CSS rule to make .hidden set to display: none and then use toggle that class when the button is clicked.

To capture the click event on the button, you'll need a click event listener

const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');

toggle.addEventListener('click', () => {
  header.classList.toggle('hidden')
});

.header {
  background: red;
  height: 3em;
}

.hidden {
  display: none;
}

<header class="header"></header>
<button class="menu-toggle">Click me!</button>

Answer 7

Answer №4

.invisible{display:none !important;}

$('#menuBtn').click(function() {
    $('.header-text').toggleClass("invisible");        
});

Answer 8

.invisible{display:none !important;}

$('#menuBtn').click(function() {
    $('.header-text').toggleClass("invisible");        
});

Hide the header content when the menu is opened

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Did the IBM MobileFirst client miss the call to handleFailure?

In which situations is it appropriate to utilize + and > within CSS?

The URL for the dynamic import in Workbox is loading incorrectly

What is the method to retrieve the username of the authenticated user using the Authservice?

A guide on extracting href containing ampersands using Gatling

Error 107 occurred while attempting to parse JSON data using the AJAX technique with the REST API

Ways to grant entry to a Vue.js page exclusively to authenticated users or when localStorage is present

What is the best method to choose the following sentence once the final * has been identified

Adjusting the size of text using a central point

Container Floating, Margin Collapse, and Block Formatting Contexts

Issue with variable not being refreshed within requestJS's data event

generate new content for a webpage by clicking on a product

My website is experiencing issues with the functionality of the jQuery scroll feature

Click-triggered CSS animations

The angular variable is being updated, but the tweet embed code surrounding it is not being refreshed

Working with session variables in combination with Javascript and the UpdatePanel control can greatly enhance the

Tips for adjusting the width of an li element based on the width of its longest content

Steps to extract viewmodel information from a specific controller following an ajax request

"Exploring the ins and outs of using Mongoose with Node.js

Using JavaScript and React to determine the height of a dynamically generated section containing multiple div blocks