The button designed to execute JavaScript and modify CSS is malfunctioning

Question

The button designed to execute JavaScript and modify CSS is malfunctioning

I am trying to use a button to expand my sidenav by toggling the class with JQuery.

Although I am more familiar with JavaScript, I attempted to solve it with JS before moving to JQuery.

function toggleMenu() {
        var sideEle = document.getElementById("sidebar-wrapper");
        var mainEle = document.getElementById("page-content-wrapper");
        sideEle.classList.toggle("sideMenuDisplayed");
        mainEle.classList.toggle("bodyMenuDisplayed");
    };

I added onclick="toggleMenu()" to the button html, but it did not work. I also added borders to both the before and after to check for class changes while debugging.

Here is my current code using JQuery

$(document).ready(function() {
      $('#menu-toggle').on('click', function() {
        $('#sidebar-wrapper').toggleClass('sideMenuDisplayed');
      });

#sidebar-wrapper {
  z-index: 1;
  position: absolute;
  width: 0;
  height: 100%;
  overflow-y: hidden;
  background: #f07878;
  border: 2px solid red;
  opacity: 0.9;
}

.sideMenuDisplayed {
  width: 250px;
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="wrapper">
  <!-- Sidenav -->
  <div id="sidebar-wrapper">
    <ul class="sadebar-nav">
      <li><a href="/account">Account</a></li>
      <li><a href="/blog">blog</a></li>
      <li><a href="/contact">Contact me!</a></li>
    </ul>
  </div>
  <!-- Page Content -->
  <div id="page-content-wrapper">
    <div class="col-1">
      <button class="btn" id="menu-toggle"><i class="fas fa-bars fa-2x" id="homeIcon"></i></button>
    </div>

    <div class="container" id="homeContainer">
      <p>my content</p>
    </div>
  </div>

When I press the button, there are no errors in the console, and the page does not change. The button should toggle the class of #sidebar-wrapper and change its properties to width: 250px; and border color to blue

javascript jquery html css

Answer 1

Answer №1

Your code already has the class toggling functionality implemented.

You can confirm this by checking the class of the element in the developer tools.

Remember, CSS ID selectors take precedence over class selectors. This concept is known as Specificity.

The specificity of selectors increases in the following order:

Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Class selectors (e.g., .example), attribute selectors (e.g.,[type="radio"]), and pseudo-classes (e.g., :hover).

ID selectors (e.g.,#example).

Universal selector (*), combinators (+, >, ~, ' ', ||), and negation pseudo-class (:not()) do not affect specificity. However, selectors within :not() do have an impact.

For instance, in your code, the #sidebar-wrapper has a specificity score of 1000, while .sideMenuDisplayed scores only 100. You can utilize class selectors as you have done or enhance the specificity to achieve the desired style toggle.

Below is the same code implemented using only class selectors:

document.getElementById('menu-toggle').addEventListener('click', toggleMenu);

function toggleMenu() {
        var sideEle = document.getElementById("sidebar-wrapper");
        var mainEle = document.getElementById("page-content-wrapper");
        sideEle.classList.toggle("sideMenuDisplayed");
        mainEle.classList.toggle("bodyMenuDisplayed");
    }

.sidebar-wrapper{
 z-index: 1;
    position: absolute;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    background: #f07878;
    border: 2px solid red;
    opacity: 0.9;
    top: 100px; /* add this because the content is masking the button here*/
}
.sideMenuDisplayed {
    width: 250px;
    border: 2px solid blue;
}

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

<div class="wrapper">
<!-- Sidenav -->
    <div id="sidebar-wrapper" class="sidebar-wrapper">
        <ul class="sadebar-nav">
            <li><a href="/account">Account</a></li>
            <li><a href="/blog">blog</a></li>
            <li><a href="/contact">Contact me!</a></li>
        </ul>
    </div>
<!-- Page Content -->
<div id="page-content-wrapper">
        <div class="col-1">
            <button class="btn" id="menu-toggle"><i class="fas fa-bars fa-2x" id="homeIcon"></i></button>
        </div>

    <div class="container" id="homeContainer">
           <p>my content</p>
        </div>
</div>

Answer 2

Your code already has the class toggling functionality implemented.

You can confirm this by checking the class of the element in the developer tools.

Remember, CSS ID selectors take precedence over class selectors. This concept is known as Specificity.

The specificity of selectors increases in the following order:

Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Class selectors (e.g., .example), attribute selectors (e.g.,[type="radio"]), and pseudo-classes (e.g., :hover).

ID selectors (e.g.,#example).

Universal selector (*), combinators (+, >, ~, ' ', ||), and negation pseudo-class (:not()) do not affect specificity. However, selectors within :not() do have an impact.

For instance, in your code, the #sidebar-wrapper has a specificity score of 1000, while .sideMenuDisplayed scores only 100. You can utilize class selectors as you have done or enhance the specificity to achieve the desired style toggle.

Below is the same code implemented using only class selectors:

document.getElementById('menu-toggle').addEventListener('click', toggleMenu);

function toggleMenu() {
        var sideEle = document.getElementById("sidebar-wrapper");
        var mainEle = document.getElementById("page-content-wrapper");
        sideEle.classList.toggle("sideMenuDisplayed");
        mainEle.classList.toggle("bodyMenuDisplayed");
    }

.sidebar-wrapper{
 z-index: 1;
    position: absolute;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    background: #f07878;
    border: 2px solid red;
    opacity: 0.9;
    top: 100px; /* add this because the content is masking the button here*/
}
.sideMenuDisplayed {
    width: 250px;
    border: 2px solid blue;
}

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

<div class="wrapper">
<!-- Sidenav -->
    <div id="sidebar-wrapper" class="sidebar-wrapper">
        <ul class="sadebar-nav">
            <li><a href="/account">Account</a></li>
            <li><a href="/blog">blog</a></li>
            <li><a href="/contact">Contact me!</a></li>
        </ul>
    </div>
<!-- Page Content -->
<div id="page-content-wrapper">
        <div class="col-1">
            <button class="btn" id="menu-toggle"><i class="fas fa-bars fa-2x" id="homeIcon"></i></button>
        </div>

    <div class="container" id="homeContainer">
           <p>my content</p>
        </div>
</div>

Answer 3

Answer №2

Kindly make adjustments to the codes provided below :

styling

#sidebar-wrapper.sideMenuDisplayed {
    width: 250px;
    border: 2px solid blue;
}
#menu-toggle {
    position: relative;
    z-index: 9;
}

jQuery

<script>
    $(document).ready(function () {
        $('#menu-toggle').on('click', function () {
          $('#sidebar-wrapper').toggleClass('sideMenuDisplayed');
        });
    });
</script>

Answer 4

Kindly make adjustments to the codes provided below :

styling

#sidebar-wrapper.sideMenuDisplayed {
    width: 250px;
    border: 2px solid blue;
}
#menu-toggle {
    position: relative;
    z-index: 9;
}

jQuery

<script>
    $(document).ready(function () {
        $('#menu-toggle').on('click', function () {
          $('#sidebar-wrapper').toggleClass('sideMenuDisplayed');
        });
    });
</script>

The button designed to execute JavaScript and modify CSS is malfunctioning

Answer №1

Answer №2

Similar questions

Layer several divs inside a main div

angular 2 text box clearing functionality appears to be malfunctioning

Determining where to implement the API display logic - on the server side or

Struggling to send formData to AJAX for uploading files

JSON Date Format

What is the best method for transforming an HTML file into an ICS (iCal) file?

Tips for achieving consistent text and image alignment through CSS styling

The size of the Tweet button iframe is set at 107 pixels

Error -1 with JSON key

Leveraging the power of moment to properly display time in relation to the present

A Promise is automatically returned by async functions

tips for aligning bootstrap flex items horizontally in multiple div containers

Utilize JSON parsing with AngularJS

Nested Promise.all within another Promise.all appears to terminate prematurely, triggering a warning indicating failure to return from a promise

What is the best way to set a background image that covers the entire screen while eliminating any borders on the sides using React and Material UI?

Adding a class to an element can be easily achieved when both input fields have values

Is there a way to divide my time during work hours using Javascript?

Is there a way to verify if an AJAX request calls HTML content?

Embed PHP PDO using AJAX

Should buttons be wrapped based on the text of the link?