Conditional Statements in jQuery

Trying to implement a check for the CSS 'display' property being set to "none", then slideDown the element "menuBK". If not, slideUp "menuBK" but encountering an error in my IF statement.

$(document).ready(function(){
    $("#burger").click(function(){
        if ($("#menuBK").css("display") == "none") {
            $("#menuBK").slideDown('slow');
            $('body').addClass('noscroll');
        } else {
            $("#menuBK").slideUp('slow');
            $('body').removeClass('noscroll');
        }
    });
});
jquerycssif-statement

Answer №1

Ensure to modify 

if $("#menuBK").css( "display", "none" );
with 
if ($("#menuBK").css( "display")=="none")
,

$(document).ready(function(){
    $("#burger").click(function(){
      if ($("#menuBK").css( "display")=="none") {
        $("#menuBK").slideDown('slow');
        $('body').addClass('noscroll');
    } 
    else {
        $("#menuBK").slideUp('slow');
        $('body').removeClass('noscroll');
    } 
    }); 
});

Alternatively, you can opt for jQuery's is() technique 

$(document).ready(function(){
    $("#burger").click(function(){
      if ($("#menuBK").is(":hidden")) {
        $("#menuBK").slideDown('slow');
        $('body').addClass('noscroll');
    } 
    else {
        $("#menuBK").slideUp('slow');
        $('body').removeClass('noscroll');
    } 
    }); 
});

Answer №2

Make sure to add parentheses after the if statement instead of semicolon.

if ($("#menuBK").css( "display" ) == 'none') {
        $("#menuBK").slideDown('slow');
        $('body').addClass('noscroll');
    } 
    else {
        $("#menuBK").slideUp('slow');
        $('body').removeClass('noscroll');
    }

Answer №3

To implement this functionality, you can utilize the jquery :visible selector.

$(document).ready(function(){
    $("#hamburger").click(function(){
      if ($("#menuBG:visible").length == 0) {
        $("#menuBG").slideDown('slow');
        $('body').addClass('stop-scrolling');
    } 
    else {
        $("#menuBG").slideUp('slow');
        $('body').removeClass('stop-scrolling');
    }
    });
});

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

Can you explain the inner workings of the delegate() and live() methods?

How do the delegate() and live() methods in jQuery possess the capability to function for both existing and potential elements on the webpage? ...

jquery-selectorsjqueryevent-delegationjquery-delegate

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

Creating a unique chrome extension that swaps out HTML and JavaScript components

Is there a possibility to create a Chrome extension that eliminates the JavaScript and CSS from a website while it loads, replacing them with new scripts from a separate source? For example, changing 'Old script' to 'new script', or &a ...

javascriptcssgoogle-chrome-extension

Hover Effect with CSS Selector - JavaScript or jQuery Implementation

I have a similar code snippet: <article class="leading-0"> <h2> <a href="link">link title</a> </h2> <ul class="actions"> <li class="print-icon"> <a ...><img...>& ...

javascriptjqueryhtmlcsscss-selectors

display the text content of the chosen option on various div elements

I created a subscription form that includes a category dropdown select field. The selected option's text value needs to appear 4 times within the form. It's all part of a single form. <select name="catid" onchange="copy()" id="catid" class="i ...

javascriptjqueryhtml

What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute pos ...

cssreactjsmaterial-uijsxsnackbar

The Functionality of Jquery Click Event -

Could someone please assist me with my JS Fiddle? I am facing an issue where after the first click, everything works fine. However, if I click on H3 again, the newclass is not toggling as expected. Thank you in advance for any help provided! $('.rec ...

jquerytoggle

PHP is struggling to interpret the JSON object

I am struggling to pass the username and password to a PHP script and verify them in the database. To achieve this, I utilize the following client-side script to create a JSON object and send it to the PHP file. var myobj = {}; myobj["usrname"]= $( "#cust ...

phpjqueryjsonmysqli

What is the best way to show a table with 100% width in the Chrome browser?

I am currently working on debugging and expanding an express application that showcases a dataset through a series of nested tables on a webpage. Initially, all the CSS resided within style tags in the head section of the HTML file, and the tables were dis ...

javascripthtmlcsstwitter-bootstrapexpress

What is the method for executing a nested query in the Parse API?

Within the user object, there is a list of features: skills: {"piano:10", "singing:5", ....}; I am looking to filter users based on their 'piano' skills. How can I achieve this? It doesn't have to be an exact match but should follow the ru ...

javascriptjqueryparsing

Dealing with blank values in jQuery DataTables

I am currently utilizing jQuery DataTable to display data in table format; within the table, there is a button that triggers a Bootstrap Modal for editing two of these values, and I utilize Ajax to send the modified values to a Spring Controller. The init ...

javascriptjqueryajaxtwitter-bootstrapdatatables

Issue with arranging blocks in a horizontal line in Opera

I am currently experiencing an issue with a wide page that contains an information block and numerous images positioned to the right. The layout is designed to be used with a horizontal scrollbar. While this setup works perfectly in Firefox, Safari, Chrom ...

htmlcssoperahorizontal-scrolling

What is causing my file input to duplicate and send the image twice?

I am facing an issue with my Ajax script that displays images sent by the admin to clients. The problem is, every time the admin uploads a new image, the script duplicates and sends the image twice. For example, if the admin uploads the first image, it sho ...

jquerydjangoajax

Making jQuery / Javascript delay until the php script has fully loaded

I am encountering an issue with an ajax request that needs to wait for a PHP script to load. The code works fine in Chrome but not in IE, where the alert box displays too quickly and the script does not run at all. Upon pressing a button, the script shoul ...

jqueryajax

Calculate the total cost for each row in a table by multiplying the quantity and price using jQuery, then display the result

I'm encountering an issue with my table row calculations involving price and quantity. The calculation results show up correctly in the console, but when I try to display them back on the table, the total sum of the first row gets duplicated into all ...

javascriptjqueryjsonajax

Refreshing the session cookie during an ajax request in CodeIgniter

Here is the ajax call I am using: remote: { url:"http://localhost/my_site/index_page/validate_name", type: "post" } Within the validate_name function, I am setting the session cookie in this way: $username = "t ...

jqueryajaxcodeignitercodeigniter-2

Guide to sending two forms concurrently on a single page in Laravel with AJAX

I am working with two forms in my view, each containing different fields and one submit button: <form method="POST" id="projet_casting_form1" class="myForms" enctype="multipart/form-data"> {{ csrf_field() } ...

jqueryajaxlaravel

What is the best way to create a conditional statement that executes two tasks sequentially within a loop?

Currently, I am attempting to create a program using Arduino that performs one task for 2 minutes, then another task for 5 minutes, alternating in a loop until a specific condition is met. I have been experimenting with if statements and while loops to ac ...

cif-statementarduinoconditional-statements

Running a continuous JQuery function loop

I need assistance with creating a continuous image fade in and out effect. Currently, my code looks like this: $(document).ready(function(){ $(".slider#1").delay(1000).fadeIn(2000); $(".slider#1").delay(1000).fadeOut(2000); $(".sli ...

jqueryhtml

Erase the Non-Breaking Space in jQuery Pagination

After thinking I was finished, I discovered a problem with my pagination. In the midst of my selected page numbers, such as '5', I found hardcoded non-breaking spaces &nbsp;. Unfortunately, I am unable to access the cms to fix this issue, so ...

jquery