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

I want to update the toggle switches within the GridToolbarColumnsButton component from MUI's DataGrid to checkboxes

Currently, I am developing a website where one of the pages has tabular data fetched from the backend. To filter this table, I utilized Mui filters from datagrid({...data}components={{ toolbar: CustomToolbar }}). Among these filters is a GridToolbarColumns ...

Guide to updating the content of the initial selector with the text from the secondary selector using jquery

I need to update the content of .list-text > p with the text from .other-text > p, and here is the corresponding HTML: <div class="list-text"> <p>Text 1</p> <p>Text 2</p> <p>Text 3</p> </div& ...

Creating a series of promises in a structured chain

How can the code structure be improved, especially regarding exception handling within a "promise chain"? $("#save").click(function(e) { e.preventDefault(); let $self = $(this); let profile = {} $self.prop("disabled" ...

Activate the text area message by clicking on the href link

I am currently working on customizing the intercom plugin for a WordPress site. My goal is to have a message triggered when a user clicks on a hyperlink, essentially simulating the enter key press in a textarea. Here is the code snippet that I am using: ...

What is the reason behind my titles being triple the length they should be?

Here is my personal website The titles are appropriately set for the About College section Note: Utilizing Purl library for this purpose var seg2 = ''; if (url.segment(2) == 'college-life') seg2 = "College Life"; else if (url.seg ...

What is the reason behind the variation in CSS caused by spaces in HTML markup?

I've come across a particular markup structure that has caught my attention: <!-- .section markup with line breaks and indentation (normal formatted coding) --> <form id="form" name="form"> <div class="section"> <input type ...

What does "cascading" refer to in the context of Cascading Style Sheets?

Similar Query: Explaining the concept of "cascading" in CSS Can you clarify the term "cascading" within Cascading Style Sheets? ...

Sending form data using Ajax

My concern is quite straightforward - I am using jquery and ajax to submit a form. When the button is clicked, the data gets sent to the database. The question is - if the user clicks the submit button twice, there will be two entries in the database. Ho ...

Is it possible for me to convert the contents of a <div> into a rasterized image when printing?

I have been using jquery.printElement.js to print a custom calendar table that I created. The functionality inside a div is mostly working as expected, but I am facing some challenges with the CSS. Despite passing along all necessary .css files, my cells a ...

Executing asynchronous Django AJAX calls on a single URL

I'm encountering an issue with submitting forms in Django. I have two forms, each needing to insert a specific number into the database. Form1: should insert value 1 Form2: should insert value 2 Both forms are located at the URL /kategorije/. When ...

Is it advisable to avoid using jQuery in Angular?

Is it true that using jquery in angular is considered bad practice? I've heard that when needing to manipulate the DOM, one should use directives. But why is it advised against to directly use jquery in the controller?? ...

Utilizing Oracle DBMS_ALERT in Oracle APEX: A Beginner's Guide

On Oracle APEX 4.2, I have set up a page process that utilizes DBMS_ALERT for a long-running task that could potentially last up to a minute. As the process is executing, notifications about its progress are being triggered using DBMS_ALERT.signal. My qu ...

Site with Three Steady Columns

While I know that this question has been asked in the past, I'm eager to see if there have been any recent changes. I am currently searching for a fixed 3 column layout using html/css, with the main content (middle) area being located first in the DO ...

SVG embedded directly into CSS is compatible with Chrome and Edge browsers, but unfortunately does not render correctly in Firefox

I'm having an issue with my code that displays icons. The GitHub icon isn't showing up on Firefox, but it works fine on Chrome and Edge. Surprisingly, the Google icon is working across all browsers! .github-icon { background-image: url("data ...

How can I center align my loader inside app-root in Angular2+?

I've successfully added a basic spinner to my <app-root> in the index.html file. This gives the appearance that something is happening behind the scenes while waiting for my app to fully load, rather than showing a blank white page. However, I& ...

Insert well-formed JSON into an HTML element

I'm facing a challenge while trying to dynamically embed a valid JSON array into HTML. The issue arises when the text contains special characters like quotes, apostrophes, or others that require escaping. Let me illustrate the problem with an example ...

Intercept all AJAX calls in jQuery

Is there a way to display a "Loading" progress bar whenever an ajax request is made in jQuery? ...

Customize the <td> column based on values and rows. Modify the current jQuery code

This code snippet contains an HTML table that dynamically populates based on the dropdown selection. The script included in the code highlights the best and worst values in the table by changing their background color to green and red, respectively. & ...

adjust the value of an attribute in a dynamic stylesheet using jquery

I'm trying to create a dynamic stylesheet using a combination of jquery, css, php, and html. My approach involves making an ajax request (using jquery) to pass the width of my screen to a php css file. However, I am facing an issue where the php css f ...

jQuery conceal input field after it has been displayed

I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything work ...