How to set the 'height' property of a DIV that has undergone a transition through change in class to 'auto'- javascript?

1
votes

Through clicking on a button, I have succeeded in executing a transition of a div (through its 'height' property) to reveal some menu options. At the end of the transition, I would like the 'height' property to be set to 'auto', so that it can accommodate any change in content inside of it.

I have tried using 'max-height' in the following code but transition does not appear to work with 'max-height'. If I use 'height' then the transition works. I have tried to use javascript to set the 'height' property to 'auto' through another trigger after the transition, and then set it to its current height(not 'auto') before executing that transition to close the DIV , through a change in class, but this fails - i am guessing because setting the element height to any value takes precedence of any subsequent change in class that tries to change the same property. No JQUERY responses please.

CSS:

.sbox{
    height: 0px;
    transition: height 1s ease-out;
    overflow: hidden;
}

.sboxopen{
    max-height: 430px;
    overflow: hidden;
    transition: max-height 1s ease-out;
}

JAVASCRIPT: 'onclick' event

 elem.className = 'sboxopen';  // Show boax
 elem.className = 'sbox';  // Hide box

HTML:

 <div class="sbox">
      // CONTENT IN HERE


 <div>
 <button id="id">Show options</button>
2
javascriptcsscss-transitions
You can add your HTML code or much better give us a demo using SO snippet – alimbaronia
Hi. We may not be able to help you solve the issue without looking at a minimal example of your code. Please read about minimal reproducible example and see if you can create one. – Nisarg
max-height trick only works when you want the div's height to increase from a specific value to auto. What you want to achieve is not clear to me, but I believe what you need is min-height. – modu
I think this is a duplicate of this. – Tony

2 Answers

0
votes

Can you update your question with your html. Better if you can add a demonstration since it's not clear enough to understand the concept that you are expecting

0
votes

As far as I can understand the question. I don't know whether I can solve your problem/requirement or not but still I have written a solution given below.

$("#toggle-box").click(function() {
  if ($("#slider-box").hasClass("sbox")) {
    $("#slider-box").attr("class", "sboxopen");
  } else {
    $("#slider-box").attr("class", "sbox");
  }
})
#slider-box {
  overflow: auto;
}

.sbox {
  height: 0px;
  transition: height 1s ease-out;
}

.sboxopen {
  height: 200px;
  transition: all 1s ease-out;
}

button {
  margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="sbox" id="slider-box">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis mollis suscipit. Etiam pellentesque leo vel est tempus, nec interdum nisl commodo. In sagittis efficitur nulla pretium aliquet. Sed non urna nisl. Mauris nec metus nisl. In metus
      nulla, semper vitae interdum sed, elementum sed libero. Vivamus posuere, turpis vel tempor aliquet, nibh est ullamcorper lorem, non sodales ex turpis non mauris. Proin hendrerit eget urna vitae tempor. Nunc eu nisi orci. Nulla et neque volutpat,
      mattis neque nec, pretium nibh. In at maximus justo. Nunc aliquet ornare ante, id lobortis turpis convallis vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eu mauris et sem malesuada tempus
      vel at nisi. Morbi ac erat vestibulum, fermentum urna nec, suscipit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam ac enim pharetra molestie. Quisque molestie pulvinar enim, et fermentum orci rhoncus id.
      Praesent ultricies, diam quis aliquet faucibus, mauris risus lobortis quam, nec interdum arcu nunc ac ipsum. Nam malesuada suscipit dui non scelerisque. Aenean pretium pretium congue. Vivamus viverra, leo et rutrum commodo, nunc libero accumsan
      erat, id facilisis velit dolor condimentum urna. Cras cursus accumsan diam ac scelerisque. Donec dapibus, urna eu posuere venenatis, tortor diam vestibulum augue, sit amet consectetur metus ligula in turpis.
    </p>
  </div>
  <div>
    <button id="toggle-box">Toggle Box</button>
  </div>
</body>

</html>