Using Jquery to switch between different CSS styles

I'm currently working with a jQuery code that is functioning properly.

$(window).load(function() {

    $('.menuBtn').click(function(e) {
        e.preventDefault();
        (this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active');
        $('nav').slideToggle();

        $('.headerBarm').toggleClass('fixed-position');
        $('nav').toggleClass('fixed-position');
        $('.headerBar').toggleClass('fixed-position');


        $('body').css({
            'height': '100%',
            'overflow': 'hidden'
        });

    });

});

Lately, I made an update by adding the last line of code.

$('body').css({
                'height': '100%',
                'overflow': 'hidden'
            });

Upon clicking the button, the CSS mentioned above gets applied.

The issue I am facing is that when I click it again, it doesn't revert back to its original state. Would implementing a toggle feature solve this problem?

Answer №1

Have you thought about extending your series of lessons and using the toggleClass() method?

CSS:

body.full {
    height: 100%;
    overflow: hidden;
}

JS (update the final line):

$("body").toggleClass("full");

Answer №2

Add a personalized style to an element and switch it on and off with a toggle function.

.custom-style {
  height: 100%;
   overflow: hidden;
}



$('body').toggleClass('custom-style');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to handle passing multiple parameters in AJAX requests using Laravel 5.2

What is the correct way to send multiple values using AJAX in Laravel? $('#submit_').on('click', function (e) { e.preventDefault(); var form_data = $('#create').serialize(); var form_taxonomy = 'category&a ...

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

Error: anticipated expression, received keyword 'if'

I'm facing an issue that I could really use some assistance with. I am trying to hide the "changeOrderUp" button when it's in the first row, and similarly, I want to hide the "changeOrderDown" button when it's in the last row. However, FireB ...

Reset the AJAX object using jQuery

Currently, my code looks like this: object1 = $.ajax({ .. .. }); If an error occurs, I would like to have the ability to restart the ajax request. For instance, if the user's connection is lost, I want to be able to easily call the same ajax again w ...

Struggling to keep text aligned to the left?

Check out the image at in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the icon without any movement even if ...

What is the best way to prevent right floated DIVs from interfering with each other's positioning, specifically within a specified space?

Despite feeling like this question may have been asked numerous times before, I've searched high and low for an answer to no avail - both here and on Google. My HTML page has a maximum width that limits the size of the content. This content includes ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

Find and retrieve all data attributes with JavaScript

What is the method to retrieve all data-attributes and store them in an array? <ul data-cars="ford"> <li data-model="mustang"></li> <li data-color="blue"></li> <li data-doors="5"></li> </ul> The resultin ...

Achieving cross-browser compatibility with JSONP and supporting IE9 syntax in jQuery, as well as ensuring functionality

I am encountering an issue with a specific part of my code that needs to be utilized when an IE browser is detected, but removed when any other browser is in use: $.ajax({ url: 'http://mapit.mysociety.org/areas/'+ulo, ...

Error 405 - Invalid request method

Here is my JQuery code for calling a web API: let request = { RequestId: "123", DeviceId: "ACU-B2-01-R1", AccessType: "Unlock", LoginId: "tester", Password: "tester" }; $.ajax({ url: 'http://localhost:55208/api/accesspanel&ap ...

What steps can be taken to ensure that an element does not exceed the boundaries of its grandparent container?

I am facing a unique scenario where I have a div with dynamic content, and inside it is another div containing a growing list. The challenge is to allow the internal div to expand until the root div reaches its maximum height, after which overflow should ...

Ways to implement JavaScript code in Angular 7 application

I am attempting to create a collapsible navigation bar using MaterializeCSS for mobile screens and I plan to incorporate JavaScript code into it. Can you advise where I should place this JavaScript code? Below is the snippet of code that I intend to inclu ...

Using JQUERY to fadeIn elements when clicking on a button and loading content from an external HTML

On my webpage, when a user clicks on a navigation link, instead of changing to a new page, the content from the linked pages loads into a div on the main page using JQuery and .load function. Both tests worked perfectly with this implementation. Now, I wa ...

Challenges with Internal Styling on Wordpress Sites

Okay. I've been dealing with some internal style issues on my Wordpress website. After dedicating hours to trying to change styles for various elements, I realized that the main html file contained a bunch of internal style sheets that were overridin ...

AngularJS form submission with Ajax requiring a double click to successfully submit the form

I need to perform the following activities on my HTML page: User inputs email and password for registration Form is sent to Controller when user clicks Submit Controller uses AJAX to create JSON request to RESTful Server and receives response from server ...

Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...

Animating jQuery to adjust height based on a percentage

My animation using percentage is not working as expected. It expands to the whole height instantly instead of smoothly transitioning to 100%. Here is my CSS code: #block-views{ overflow:hidden; height:20px; } This is my HTML code: <div id="block-view ...

Expand the range of input movement using a unique and oversized custom thumb graphic

In my project, I am creating a personalized input range feature by utilizing a 40px x 80px image as the background for the thumb. Typically, the thumb is limited to moving within the length of the track from edge to edge. However, I am aiming for the thu ...

Utilizing Fullcalendar v5's sticky header feature alongside a Bootstrap fixed top navigation bar for a seamless

Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top. The issue arises when attempting to set stickyHeaderDates, aiming to keep th ...