jQuery - .css() not working?

Question

Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3

The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:

$("#btn").on("click", function() {
  $("#dd").toggleClass("show");
});

var dv = document.getElementById("dd");
var item = dv.getElementsByTagName("A");
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px");

body {
  margin: 10px;
}

#btn {
  background-color: red;
  color: black;
  border: none;
  outline: none;
  width: 100px;
  height: 100px;
  font-size: 20px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

#btn:hover {
  background-color: black;
  color: white;
  border-radius: 52.5px;
}

#dd {
  opacity: 0;
  max-height: 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#dd.show {
  opacity: 1;
}

#dd.show:hover {
  border-radius: 15px;
}

#dd a {
  background-color: red;
  color: black;
  padding: 16px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 20px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

#dd a:hover {
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">press me</button>
<div id="dd">
  <a href="#">press me 1</a>
  <a href="#">press me 2</a>
  <a href="#">press me 3</a>
  <a href="#">press me 4</a>
</div>

This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:

$("#btn").on("click", function() {
  $("#dd").toggleClass("show");
});

body {
  margin: 10px;
}

#btn {
  background-color: red;
  color: black;
  border: none;
  outline: none;
  width: 100px;
  height: 100px;
  font-size: 20px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

#btn:hover {
  background-color: black;
  color: white;
  border-radius: 52.5px;
}

#dd {
  opacity: 0;
  max-height: 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  top: 10px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#dd.show {
  opacity: 1;
  max-height: 225px;
}

#dd.show:hover {
  border-radius: 37.5px;
}

#dd a {
  background-color: red;
  color: black;
  padding: 16px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 20px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

#dd a:hover {
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">press me</button>
<div id="dd">
  <a href="#">press me 1</a>
  <a href="#">press me 2</a>
  <a href="#">press me 3</a>
  <a href="#">press me 4</a>
</div>

Have you done any debugging work (like adding console.log() calls) to see what item[0].offsetHeight and item.length are? The element does get a max-height value set. Also using a mix of jQuery and DOM APIs is kind-of confusing and error-prone. — Pointy
– Pointy, Commented Nov 10, 2017 at 23:41
You are dynamically adding the "show" class when the button is clicked. But you are trying to add styling to the "show" class at some other point (and at that point the "show" class doesn't exist). Change/add the css within the click event. — Kurt
– Kurt, Commented Nov 10, 2017 at 23:45
The thing is, even if i write "100px" instead of "item[0].offsetHeight * item.length + 'px' ", it still gives the same result. No max-height. — Lukas Knudsen
– Lukas Knudsen, Commented Nov 10, 2017 at 23:47

SourceOverflow · Accepted Answer · 2017-11-10 23:46:33Z

4

jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)

You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)

answered Nov 10, 2017 at 23:46

SourceOverflow

2,0581 gold badge10 silver badges23 bronze badges

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

Comments

Mark · Accepted Answer · 2017-11-10 23:45:05Z

at the time that this line executes:

$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")

you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element

<div id="dd">...</div>

doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.

This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying

#dd.show {
    max-height: 225px;
}

then I'd just do that.

If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.

console.log($("#dd").hasClass('show'));

Lukas Knudsen · Accepted Answer · 2017-11-11 00:08:08Z

I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3

Here is the final code for people that might come in later to see the solution :3

$("#btn").on("click", function() {
	if(!$("#dd").hasClass("show")) {
	$("#dd").toggleClass("show");

	$("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px");
} else {
	$("#dd").toggleClass("show");

	$("#dd").css("max-height", "0px");
}
});

body {
  margin: 10px;
}

#btn {
  background-color: red;
  color: black;
  border: none;
  outline: none;
  width: 100px;
  height: 100px;
  font-size: 20px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

#btn:hover {
  background-color: black;
  color: white;
  border-radius: 52.5px;
}

#dd {
  opacity: 0;
  max-height: 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

#dd.show {
  opacity: 1;
}

#dd.show:hover {
  border-radius: 15px;
}

#dd a {
  background-color: red;
  color: black;
  padding: 16px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 20px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

#dd a:hover {
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">press me</button>
<div id="dd">
  <a href="#">press me 1</a>
  <a href="#">press me 2</a>
  <a href="#">press me 3</a>
  <a href="#">press me 4</a>
</div>

Collectives™ on Stack Overflow

jQuery - .css() not working?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related