The else if statement is not functioning as anticipated

Question

The else if statement is not functioning as anticipated

I am looking for a toggle function that will open and close a <div> when clicked. Check out this JSFiddle

HTML

<div class='answer'>answer</div>
  <div style='display:none'>
    <textarea name='talking'></textare>
    <input type='submit'>
</div>

JQuery

$('.answer').click(function(){
    if($(this).next().css('display','none')){
        $(this).next().css('display','block');
    }else if($(this).next().css('display','block')){
        $(this).next().css('display','none');
    }
})

In this scenario, the "if" statement works as intended to open the <div>, but the "else if" statement does not successfully close it again.

javascript jquery css

Answer 1

Answer №1

When crafting your conditional statements, it is important to access the element's display property and compare it with a specific value.

Instead of:

if ( $(this).next().css('display', 'none') ) {
    // ...
}

You should have:

if ( $(this).next().css('display') === 'none' ) {
    // ...
}

See Updated Example

$('.answer').click(function () {
    if ($(this).next().css('display') === 'none') {
        $(this).next().css('display', 'block');
    } else if ($(this).next().css('display') === 'block') {
        $(this).next().css('display', 'none');
    }
});

Your code can actually be simplified like so:

View Example Here

$('.answer').on('click', function () {
    $(this).next().toggle();
});

The .toggle() method streamlines this process for you.

Answer 2

When crafting your conditional statements, it is important to access the element's display property and compare it with a specific value.

Instead of:

if ( $(this).next().css('display', 'none') ) {
    // ...
}

You should have:

if ( $(this).next().css('display') === 'none' ) {
    // ...
}

See Updated Example

$('.answer').click(function () {
    if ($(this).next().css('display') === 'none') {
        $(this).next().css('display', 'block');
    } else if ($(this).next().css('display') === 'block') {
        $(this).next().css('display', 'none');
    }
});

Your code can actually be simplified like so:

View Example Here

$('.answer').on('click', function () {
    $(this).next().toggle();
});

The .toggle() method streamlines this process for you.

The else if statement is not functioning as anticipated

Answer №1

Similar questions

Stop the submission of a form using jQuery based on its unique identifier

Check through an array for any updates whenever a function is called and my react state is altered

Unlocking the potential of # to craft interactive web pages

How can I make vuetify carousel arrows unique to my design?

Initial variables for jQuery widget encryption setup

Is there a way to determine if a webpage is being accessed from a website or from a local file system?

What is the process for exporting a class and declaring middleware in TypeScript?

Interfacing with the data fields of a native application using Node.js

What is the purpose of storing the Vue instance in a variable or constant?

Extracting Querystring Value in C#

Press the button in an HTML document to activate JavaScript

When first logging in, React context may initially return as undefined, but it functions correctly upon refreshing the

Code snippets to reduce excess white space on a website using HTML and CSS

Using the map method to print from a massive array collection in sets of 20

Unable to bring in the specified export 'Directive' from a non-EcmaScript module - only the default export is accessible

What could be the reason why the color of pixels X and Y is not being retrieved successfully in this

What is the best way to add a background to text that has been wrapped?

The alignment of vertical text can impact the positioning of surrounding text

Create an endless loop of two distinct animations with animate.css

Is there a way to extract data from the Redux state in a React component?