Toggle class and change size on an element using jQuery

Question

I am trying to have a div change its properties on a click function. Some of the properties I am changing with a call to toggleClass() which is fine and works great. However I also want to resize the div based on the size of the viewport. In order to have access to those numbers I am changing the width and height with jQuery. This command looks like this:

$('.box').click( function() {
  $(this).toggleClass('box--grow', 0);
  $(this).css('width', w * .9);
  $(this).css('height', h * .9);
});

EDIT I want the height and width to go back to 100%.

I tried using the toggle class but that caused the entire div to disappear, and this solution doesn't work because when I click the div again the class is removed but the height is the same.

I am looking for a way to toggle this or to get the viewport width within the css. I tried both approaches but couldn't get anything to what I am looking for.

$(this).toggleClass('box--grow', 0); Why are you passing 0 to toggleClass()??? — A. Wolff
– A. Wolff, Commented Oct 8, 2015 at 19:05
@Pangloss I want the height and width to go back to 100%, sorry I didn't really mention that. — eignhpants
– eignhpants, Commented Oct 8, 2015 at 19:11
i edited my answer, let me know if it works else could you maybe make a fiddle? — Sjoerd de Wit
– Sjoerd de Wit, Commented Oct 8, 2015 at 19:17

Saar · Accepted Answer · 2015-10-08 19:00:56Z

2

why not using CSS VH and VW values?

CSS:

.my90Class{
   width: 90vw;
   height: 90vh;
}

JS:

$('.box').click( function() {
   $(this).toggleClass("my90Class");
});

answered Oct 8, 2015 at 19:00

Saar

2,3061 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stickers · Accepted Answer · 2015-10-08 19:50:44Z

1

You need to get the window size first, and then put everything into combined .ready() and .resize() functions, to make it responsive.

function myfunction() {
    var w = $(window).width();
    var h = $(window).height();

    $('.box').click(function () {
        if ($(this).hasClass('box--grow')) {
            $(this).removeClass('box--grow');
            $(this).css({
                'width': '',
                'height': ''
            });
        } else {
            $(this).addClass('box--grow');
            $(this).css({
                'width': w * .9,
                'height': h * .9
            });
        }
    });
}

$(document).ready(myfunction);
$(window).on('resize', myfunction);

jsfiddle

edited Oct 8, 2015 at 19:50

answered Oct 8, 2015 at 19:24

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

1 Comment

eignhpants Over a year ago

A lot of these answers worked but I went with this, thanks.

Sjoerd de Wit · Accepted Answer · 2015-10-08 19:11:26Z

0

You can check for the class with:

$(this).hasClass('box--grow')

Then to remove the class:

$(this).removeClass('box--grow');

And to add it back again:

$(this).addClass('box--grow');

The end would look like this save the original width and height before the event so you can add it back again:

var oldwidth = $('.box').css('width');
var oldheight = $('.box').css('height');

$('.box').click( function() {
  if($(this).hasClass('box--grow')) {
   $(this).removeClass('box--grow');
   $('.box').css('width', oldwidth);
   $('.box').css('height', oldheight);
  } else { 
   $(this).addClass('box--grow');
  }
});

untested but it would probably work

edited Oct 8, 2015 at 19:11

answered Oct 8, 2015 at 19:08

Sjoerd de Wit

2,4135 gold badges28 silver badges47 bronze badges

2 Comments

eignhpants Over a year ago

I can toggle the class just fine, I want the height and width to go back down to 100%

Sjoerd de Wit Over a year ago

so what is the value of w and h? the question is toggle css without using toggleclass i did that for you. Also i added a method that does what you want i hope

Collectives™ on Stack Overflow

Toggle class and change size on an element using jQuery

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related