Jquery: can't set height to auto

Question

1.00/5 (1 vote)

See more:

Here ul#select is variably appended as li. I'm trying to fold and unfold, but hiding (height: 0) works, but unfolding (height: auto) doesn't work.

I've tried this too,

JavaScript

var height = 0;
$(ul#select).children().each(function(){
   height = height * $(this).outerHeight(true);
});

but it doesn't increase when members add more. The auto setting seems to be the best.

In addition to this, there are ways to add and delete classes, but there is a problem that the animate effect cannot be used in that case.

CSS

.autoHeight{ height:auto !important; }
.hideHeight{ height:0 !important }

What is the reason for the 'auto' setting not working and how to solve it?

What I have tried:

JavaScript

$(document).on('click', '.guest' ,function(){
   const is = $(this).hasClass('rotate');
   const action = $(this).attr('data-action');
   if( is !== true ){
      $(this).addClass('rotate');
      $('ul#select').animate({"height":"0"},100);
   }else if(is === true ){
      $(this).removeClass('rotate');
      $('ul#select').animate({"height":"auto"},100);  << doesn't work
   }
});

Posted 5-Jun-22 5:59am

Chopin2001

Updated 10-Jun-22 1:47am

Add a Solution

Comments

Member 15627495 7-Jun-22 5:11am

fold with hidden li first,
then in the animate function , you first go on display:(the one required), then the growth of your sub menu

kind of best to :

--in a loop
add a li ( hidden )
grow the shown area last bottom
show the li
--end loop

this way its inflate the area of submenu, then reveal a new stair ( li ) until the submenu is complete.

you know css handle animation too
you can add a class to achieve, this class contains the animation.
animation by css are powerfull.

Richard Deeming 7-Jun-22 5:18am

REPOST
You have already posted this:
Can't set height to "auto" in jquery[^]

If your question doesn't appear immediately, you need to wait until it passes the moderation queue. Do not post it again.

Chopin2001 10-Jun-22 7:39am

This seems to be related to a bug in codecomplete. Double click event fired when upload button was clicked. The site showed me a page warning me to slow down. I tried to post again, but it didn't work, so I'll upload it again after a while. It wasn't intentional. I deliberately didn't post twice. You should have checked if my post was already up. You may have accidentally double-clicked, but I think site administrators should also avoid double-clicking.
Anyway I didn't know this was posted twice until you told me it was posted.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chopin2001 · Answer 1 · 2022-06-10T01:47:00

I solved the problem. The auto setting of jquery is not handled for some reason. So I did something like this:

JavaScript

$(document).on('click', '.guest' ,function(){
   const is = $(this).hasClass('rotate');
   const action = $(this).attr('data-action');

   if( is !== true ){
      $(this).addClass('rotate');
      $('ul#select').animate({"height":"0"},100);
   }else if(is === true ){
      $(this).removeClass('rotate');
      let length = $('ul#select li.element').length;
      let height = $(li.element').height();
      $('ul#select').animate({"height":length*height+"px"},100,{
         $('ul#select').css("height"."auto");
      });  
   }
});

Jquery: can't set height to auto

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us