CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Roman Zavoruiev
Roman Zavoruiev

Reputation: 13

Toggle Element width using jQuery

I have hamburger and menu on the left side, which has width: 0px;

How can I do after click on hamburger menu changes width to 250px, and second click change width to 0px?

var hamburger = $('.hamburger-menu__list').css('width');

$('.hamburger-toggle').click(function(){
    $(this).toggleClass('open');
    if (hamburger == '0' ) {
        $('.hamburger-menu__list').css('width', 250);
    } 
    else {
        $('.hamburger-menu__list').css('width', 0);
    };
});

Upvotes: 1

Views: 134

Answers (4)

Rayon
Rayon

Reputation: 36609

You can still cache element but access width every time click is invoked.

Another suggestion is to use ternary-operator as this is ideal use case to use it.

var hamburger = $('.hamburger-menu__list');

$('.hamburger-toggle').click(function() {
  $(this).toggleClass('open');
  var hamburgerWidth = hamburger.css('width');
  $('.hamburger-menu__list').css('width', hamburgerWidth == '0' ? 250 : 0);
});

Upvotes: 1

Matthi
Matthi

Reputation: 1063

var
    $hamburger = $('.hamburger-menu__list').css('width'),
    $hamburgerToggle = $('.hamburger-toggle'),
    isOpen = false;

function toggleMenu() {
    isOpen = !isOpen;
    $hamburgerToggle.toggleClass('open', isOpen);
    $hamburger.width(isOpen ? 250 : 0);
}

$hamburgerToggle.click(toggleMenu);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You are doing DOM manipulation. It is bad practice to relay on this, because it is asynchronous. A state variable (isOpen) helps to have only one source for the state (single source of truth).

Upvotes: 0

Tareq El-Masri
Tareq El-Masri

Reputation: 2573

You need to check the width every time you click on the button, also you need to parseInt the width to get a right number, css('width') returns the value with prefix px e.g 250px so parseInt will remove the prefix and returns pure number, Try this:

$('.hamburger-toggle').click(function(){
    var hamburgerWidth = parseInt($('.hamburger-menu__list').css('width'));

    $(this).toggleClass('open');

    if (hamburgerWidth === 0) {
        $('.hamburger-menu__list').css('width', 250);
    }  else {
        $('.hamburger-menu__list').css('width', 0);
    };
});

Upvotes: 0

ZeroCho
ZeroCho

Reputation: 1360

This will work. You have to check hamburger width everytime.

$('.hamburger-toggle').click(function(){
    var hamburger = $('.hamburger-menu__list').css('width');
    $(this).toggleClass('open');
    if (hamburger == '0' ) {
        $('.hamburger-menu__list').css('width', 250);
    } 
    else {
        $('.hamburger-menu__list').css('width', 0);
    };
});

Upvotes: 2

Related Questions