Setting html classes CSS with jQuery

Question

So I have an element

<div class="accordion">hello</div>

and when an event happens(button clicked) several classes are added and removed to the element found above.

The first phase adds the class beginning-transition

<div class="accordion beginning-transition">hello</div>

The second phase adds the class middle-transition and removes the beginning-transition class.

<div class="accordion middle-transition">hello</div>

The final stage removes the middle-transition class

<div class="accordion">hello</div>

During this button click event I run a formula that determines the height of the div.

var element = $('.accordion');
element.css('height', 10);
$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);

The problem is that when the two classes beginning-transition and middle-transition are added to the class, the CSS height does not change from 10px.

The following line below:

element.css('height', 10);

Seems to override these two css rules:

$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);

How can I fix this?

Answer 1

var element = $('.accordion');
element.css('height', 10);
$(element + '.beginning-transition').css('height', 100);
$(element + '.middle-transition').css('height', 200);

So you're assigning a height… then assigning an override? Just do it once.

var element = $('.accordion')[0];
if (element.classList.contains('beginning-transition')) {
    element.style.height = '100px';
} else if (element.classList.contains('middle-transition')) {
    element.style.height = '200px';
} else {
    element.style.height = '10px';
}

That's vanilla JS, but it's the same thing (with different names) in jQuery.

The actual problem is that you were adding a jQuery element list ( $('.accordion') ) to a string (the class). That doesn't make sense. To fix the problem changing your code as little as possible, make it:

var element = $('.accordion');
element.css('height', 10);
$('.accordion.beginning-transition').css('height', 100);
$('.accordion.middle-transition').css('height', 200);

When in doubt, debug with your console.

Answer 2

You're trying to concatenate a selector string to element which is a jQuery object. That's not going to work, since jQuery objects aren't converted to their selector strings when converted into strings, so you'll just get a nonsensical selector string as a result.

If you need to save the original selector string for later use you need to save it separately:

var selector = '.accordion';

// Or var element = $(selector); element.css(...); if you need the element var too
$(selector).css('height', 10);
$(selector + '.beginning-transition').css('height', 100);
$(selector + '.middle-transition').css('height', 200);

Answer 3

JQUERY $(".accordion").click(function(){

setTimeout(function () {$(".accordion").addClass("BT")}, 1000);
setTimeout(function () {$(".accordion").addClass("MT")}, 2000);
setTimeout(function () {$(".accordion").removeClass("BT")}, 3000);
setTimeout(function () {$(".accordion").removeClass("MT")}, 3000);



 });

CSS

.accordion {
width: 399px;
height:100px;
background: black;  
}

.BT {

height:200px;
}

.MT {
height: 300px;
}