Identifying the state of the sidebar is key

Question

Identifying the state of the sidebar is key

I am looking to create a script in JavaScript that can detect whether a sidebar has the class "active" or not. The sidebar is controlled by Bootstrap's toggle button, which adds the "active" class when clicked.

<button type="button" id="sidebarCollapse" class="btn btn-info" style="font-family:'Poppins'; position:absolute; z-index:9; margin-left:7vh; margin-top:2vh;font-size: 1.5em">
                    <span class="glyphicon glyphicon-filter"></span> Filter
                </button>

Here is the CSS styling:

#sidebar {
    background: #202020;
    color: #fff;
    display:inline-block;   
}

#sidebar.active {
    margin-left: -250px;
}

And here is the JavaScript code:

//Check if the sidebar has the 'active' class
var sideBar = document.getElementById('sidebar')
console.log(sideBar.className)
if (sideBar.className == ('active')){
    console.log('active')
}
else {console.log('not active')}

Just to clarify, the 'active' class is only added to the sidebar when the sidebarCollapse button is clicked and removed when it is clicked again. However, the above code is not functioning properly. It always logs 'not active', even when the sidebar is visibly marked as 'active'. I would like it to dynamically recognize the status of the sidebar (active or not active).

var sideBar = document.getElementById('sidebar');
console.log(sideBar.className)
if (sideBar.classList.contains('active')){
    console.log('active')
}
else {console.log('not active')}

Below are images showcasing the HTML with both states of the sidebar (active/not active):

https://i.sstatic.net/VjXxr.png

https://i.sstatic.net/Gccfm.png

javascript html css bootstrap-4 sidebar

Answer 1

Answer №1

Your code should be functioning correctly. There are two key reasons why it may always display 'not active'.

The code is being executed on page load
You are fetching the sidebar div before it has been opened, therefore the DOM object is not updated afterwards.

To solve this issue, move your code into a function and call that function whenever you need to check the status of the sidebar.

See the sample code below for reference.

function isSidebarOpen() {

  var sideBar = document.getElementById('sidebar');

  if (sideBar.classList.contains('active')) {
    console.log('active')
  } else(console.log('not active'))

}

<div id="sidebar" class="active">
  test
  <button onclick='isSidebarOpen()'>
Check</button>

</div>

Answer 2

Your code should be functioning correctly. There are two key reasons why it may always display 'not active'.

The code is being executed on page load
You are fetching the sidebar div before it has been opened, therefore the DOM object is not updated afterwards.

To solve this issue, move your code into a function and call that function whenever you need to check the status of the sidebar.

See the sample code below for reference.

function isSidebarOpen() {

  var sideBar = document.getElementById('sidebar');

  if (sideBar.classList.contains('active')) {
    console.log('active')
  } else(console.log('not active'))

}

<div id="sidebar" class="active">
  test
  <button onclick='isSidebarOpen()'>
Check</button>

</div>

Answer 3

Answer №2

To monitor changes in the DOM, use the MutationObserver interface.

Copy and paste the code snippet below to set up the observation:

const targetNode = document.getElementById('sidebarCollapse'); // Select the element to observe

const config = { attributes: true }; // Specify what type of changes to listen for

const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'attributes') {
          if (targetNode.classList.contains('active')){
            console.log('active');
            }
        }
    }
};

const observer = new MutationObserver(callback); // Create a new observer instance

observer.observe(targetNode, config); // Begin observing the specified element

View the live demonstration on CodePen.

Answer 4

To monitor changes in the DOM, use the MutationObserver interface.

Copy and paste the code snippet below to set up the observation:

const targetNode = document.getElementById('sidebarCollapse'); // Select the element to observe

const config = { attributes: true }; // Specify what type of changes to listen for

const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'attributes') {
          if (targetNode.classList.contains('active')){
            console.log('active');
            }
        }
    }
};

const observer = new MutationObserver(callback); // Create a new observer instance

observer.observe(targetNode, config); // Begin observing the specified element

View the live demonstration on CodePen.

Identifying the state of the sidebar is key

Answer №1

Answer №2

Similar questions

Building numerous pagination features in a single page using Codeigniter

Using jQuery to manipulate XML: Altering XML content using its ID with jQuery

What could be causing this code to keep looping?

creating a personalized CSS style rule

What is the best approach to dynamically load html table cell data into a table with changing headers in a React application?

Issue with nivo-lightbox not opening upon clicking image

The functionality to show the login status is currently malfunctioning

Dynamic Pagination with MUI Counting

Is it acceptable to employ numerous classes simultaneously?

XSLT transformation eliminates HTML elements from mixed content

css clip-path hover effect restricted to specific shape

Tips for overriding bootstrap.css file in mvc asp.net using Visual Studio

Tips on swapping out a part in ExtJS

In Firefox, right floated elements vanish when utilizing columns

Is the Owl carousel Auto Play feature malfunctioning when hovered over?

The <main> element is not inheriting the height of its parent

Navigating through a JSON array of objects within an array of objects in a React Fetch request: How can I effectively utilize mapping?

Understanding the Access-Control-Allow-Headers in preflight response for Wordpress and VueJS

Expanding the width of three floating divs in the center to match the width of the parent container div

Use body height set to 100% to measure the scrollTop distance