CODEWITHSUNDEEP
jquerycssclickbackground-color
stephvdw
stephvdw

Reputation: 11

How do I remove the CSS property after clicking the second time with jquery .click function?

The CSS properties are added after the first click, but I need them to go away after the second click. What am I missing?

I tried doing it with toggle() and removeClass(), but I'm not experienced enough...

if ($(window).width() < 800) {
  $('.dropdown').hide();
  $('.fa-bars').click(function() {
    $("ul").css("background-color", "white");
    $('.dropdown').slideToggle();
  })
}

Upvotes: 0

Views: 103

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074505

Your best bet here is not to use the css function at all. Instead, use a class, and toggle it:

CSS:

.toggled {
    background-color: white;
    /* Perhaps add an animation here if you want the slide toggle look */
}

JavaScript:

if ($(window).width() < 800) {
  $('.dropdown').hide();
  $('.fa-bars').click(function() {
    $("ul").toggleClass("toggled"); // ***
  })
}

That entire JavaScript block would probably be better suited to a CSS media query that hides the dropdown on screen widths below 800, and then just the click event handler to show it even when the screen width is below 800.

CSS:

@media screen and (max-width: 799px) {
    .dropdown:not(.show) {
        display: none;
        /* Perhaps add an animation here if you want the slide toggle look */
    }
}

JavaScript:

$('.fa-bars').click(function() {
  $("ul").toggleClass("show");
})

Upvotes: 1

Related Questions