jQuery .height() not changing

Question

I have this code:

$(function() {
  $('#team-ch').click(function() {
    $('#team-camb-hert').height('auto');
  });
});

Which changes the height of a div on a link click. I have put an alert inside this function and can confirm it's being ran when the link it clicked, only the height of the target div isn't changing. The target div has a height of 0 set in the CSS file to begin with but it's not being updated.

Does anyone have any idea what may be going on here?

Answer 1

Try this:

$(function() {
  $('#team-ch').click(function() {
    $('#team-camb-hert').css('height','auto');
  });
});

Answer 2

See how changing the height of an element works:

  .test{ margin:10px; border-style:solid; border-width:1px; height:0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" value="height:10px" onclick="$('.test').css('height','10px');"> <input type="button" value="height:auto" onclick="$('.test').css('height','auto');"> <input type="button" value="height:0px" onclick="$('.test').css('height','0px');"> <input type="button" value="hide" onclick="$('.test').hide();"> <input type="button" value="show" onclick="$('.test').show();"> <div class="test">test</br>test test</br>test</br>test</br></div> 

Answer 3

you can also try this:

$(function() {
 $('#team-ch').click(function() {
 $('#team-camb-hert').attr('style','height:auto');
 });
});

Answer 4

Please put your script code below the jQuery library and run again as shown below,

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

$(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto');});});