Updating CSS in response to a button click using JavaScript: A step-by-step guide

Question

Updating CSS in response to a button click using JavaScript: A step-by-step guide

Currently, I am in the process of creating a basic website with bootstrap5 (no JS at the moment). One issue I am facing is when I shrink the screen to the point where the navigation bar transforms into a burger button. Whenever I click on the burger button and the menu expands, I want the margin-top of the element below to increase so that the menu does not overlap with it.

I have attempted to solve this problem with various methods in JavaScript, but nothing has seemed to work so far. Here is a snippet of my code:

<nav class="navbar navbar2 navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
    <button class="navbar-toggler" id="button-burger" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav navbar-center2">
.........
.........
.........
.........
</nav>

<div class="container-fluid nav-wrapper" id="container-below-header">

Essentially, what I am aiming to achieve is to dynamically alter the class of the below div every time the burger button is clicked. Your insights and assistance on this matter would be greatly appreciated!

javascript html css bootstrap-5

Answer 1

Answer №1

To achieve this effect, you can set up two separate CSS classes.

The first class will include all the styles for when the button is active (i.e., clicked).
The second class will include all the styles for when the button is inactive.

CSS

.active{...styles for the active button}
.inactive{ ...styles for the inactive button }

JavaScript

const button = document.getElementById('id for the button');
button.addEventListener("click",() => {
      if(button.classList.contains("active")){
           button.classList.remove("active");
           button.classList.add("inactive");
    } else {
        button.classList.add("active");
        button.classList.remove("inactive");
    }
})

Answer 2

To achieve this effect, you can set up two separate CSS classes.

The first class will include all the styles for when the button is active (i.e., clicked).
The second class will include all the styles for when the button is inactive.

CSS

.active{...styles for the active button}
.inactive{ ...styles for the inactive button }

JavaScript

const button = document.getElementById('id for the button');
button.addEventListener("click",() => {
      if(button.classList.contains("active")){
           button.classList.remove("active");
           button.classList.add("inactive");
    } else {
        button.classList.add("active");
        button.classList.remove("inactive");
    }
})

Answer 3

Answer №2

To easily add or remove a class on click, you can utilize the following code:

element.classList.toggle("ClassName");

First, identify the element that can be toggled
Then, select the element where you want to add the click listener
Finally, implement the click event listener

    var element = document.querySelector(".myclass");
    var someElement = document.querySelector(".otherClass");
    someElement.addEventListener('click', function () {
        element.classList.toggle("show");
    });

Answer 4

To easily add or remove a class on click, you can utilize the following code:

element.classList.toggle("ClassName");

First, identify the element that can be toggled
Then, select the element where you want to add the click listener
Finally, implement the click event listener

    var element = document.querySelector(".myclass");
    var someElement = document.querySelector(".otherClass");
    someElement.addEventListener('click', function () {
        element.classList.toggle("show");
    });

Updating CSS in response to a button click using JavaScript: A step-by-step guide

Answer №1

Answer №2

Similar questions

Issue with Chrome related to svg getScreenCTM function

What is the best way to shift my content to the next line once it reaches a specific width in my paragraph

What is the best way to ensure data validation occurs only when a button is clicked

Node Signature Generation for Gigya Comment Notifications

A sleek and streamlined scrollspy that dynamically updates the active class exclusively for anchor tags

How can I direct to an HTML file using Vue 3 router?

What is the best way to apply a border to the entire vertical line in a Bootstrap table?

Update the data in Firebase, but revert it back to the original state after a few seconds with the use of "angularFire."

Customize Date Display in Material-UI DataGrid

Can you explain the difference between CDN and ESM builds in vue.js?

Showing the date object in a react component

Using Jquery .ajax to Populate Select Dropdown with JSON Data

While creating a React app, Docker becomes stuck due to a hangup when checking the core-js dependency

Listening to React events on multiple elements in an array

The standard process and organization of a project using AngularJS in conjunction with Python Flask

Tips for concentrating on the initial input field produced by an ng-repeat in AngularJS

The most effective method for positioning a child element to the left and top using Flexbox grid

What is the Ideal Location for Storing the JSON file within an Angular Project?

Combining two arrays filled with objects to form a collection of Objects on a Map

Incorporating a PHP file containing both PHP and JavaScript variables into an AJAX document