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>

Answer 1

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>

Answer 2

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>)

Answer 3

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'));