I have a dynamic div which has content inside of it of different lengths. Rather than having a fixed height to slide down the content and having empty white space, I have created a dynamic script in JQuery which only slides down based on the how much content is in within the parent div.

I have managed to get the dynamic height to slide but I can't toggle it to slide back up.

$(".parent_accordion").click(function() {
  const that = $(this);
  //console.log($(this).children().height());

  //let learning_accordion = $(this).parent().find(".my_learning_accordion_content").toggleClass("show-open");
  let learning_accordion = $(this).next();
  let inner_content = 0;

  learning_accordion.children().each(function() {
    inner_content  = $(this).height();
    let me = that.next().css("height", inner_content   "px");
    me.toggle();
  });

  $(this).find("i").toggleClass("rotate");

});

.my_learning_accordion_content {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}

<div >
  <div >
    <div >
      <div >
        <div >Completed</div>
        <i ></i>
      </div>
      <div  style="height: 30px;">
        <div >
          <span>TOTAL:</span>
          <span >&nbsp;10</span>
        </div>
        <div >
          <div >
            <div >
              <span ></span>
              <span >CE credits</span>
            </div>
            <div >
              <div >touchTALKS</div>
              <div >test 3</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >In Progress</div>
        <i ></i>
      </div>
      <div  style="height: 111.781px;">
        <div >
          <div>
            <div >
              <div >
                <span ></span>
                <span >CE credits</span>
              </div>
              <div >
                <div >touchEXPERT OPINIONS</div>
                <div >Chronic kidney disease in patients with type 2 diabetes</div>
              </div>
            </div>
            <div >
              <!-- <a  href="#">Continue and complete test to claim credits</a> -->
              <a  href="https://dev.touchneurology.com/education/test-2/ " target="_blank"> Continue and complete test to claim credits </a>
              <i ></i>
            </div>
          </div>
        </div>
        <div >
          <div>
            <div >
              <div >
                <span >1.5</span>
                <span >CE credits</span>
              </div>
              <div >
                <div >touchIN CONVERSATION</div>
                <div >Achieving individualized glycemic targets in patients with type 2 diabetes</div>
              </div>
            </div>
            <div >
              <!-- <a  href="#">Continue and complete test to claim credits</a> -->
              <a  href="https://dev.touchneurology.com/cme/test/ " target="_blank"> Continue and complete test to claim credits </a>
              <i ></i>
            </div>
          </div>
        </div>
      </div>
      <div >
        <!-- <div ><a  href="#">Update your interests for relevant content</a><i ></i></div> -->
        <div >
          <a  href="/my-learning/saved-activities/">Saved activities</a>
          <i ></i>
        </div>
        <div >
          <a  href="/my-learning/saved-activities/">Your learning history</a>
          <i ></i>
        </div>
        <div >
          <a  href="/my-learning/subscriptions-interests/">Clinical Interests</a>
          <i ></i>
        </div>
        <div >
          <a  href="/my-learning/subscriptions-interests/">Communication Preferences</a>
          <i ></i>
        </div>
        <div >
          <a  href="/my-learning/notifications/">Notifications</a>
          <i ></i>
        </div>
        <div >
          <a  href="/my-learning/account-settings/">Account settings</a>
          <i ></i>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

I set up an example where content gets added via JS, you don't need to set any height on the elements. slideToggle will handle this.

You can set the animation speed and run a function once the animation has been completed.

const acContent = `Lorem ipsum dolor sit amet consectetur adipiscing elit vehicula sapien id, cras dictumst ultrices placerat suspendisse eros auctor arcu in magnis pellentesque, phasellus dis sociosqu lectus ridiculus pretium libero tempus penatibus. Condimentum sed etiam tristique vehicula conubia molestie cursus dictumst litora, curae enim vitae magnis eget vel placerat convallis rutrum, dignissim primis ligula quam mattis fermentum dictum natoque. Duis porttitor nulla bibendum nascetur in nam, nostra suspendisse sociosqu class nisi vulputate feugiat, tempor cursus odio eu ac.
Turpis feugiat porta lacus condimentum mi, euismod iaculis eleifend inceptos ad gravida, fusce cursus neque nec. Ultrices orci rhoncus mollis vehicula magnis posuere, diam a vitae viverra donec, erat dis venenatis nam per. Interdum pulvinar tortor taciti montes enim maecenas nec laoreet mus, eu felis consequat libero tincidunt nisl penatibus dis porttitor, eleifend sollicitudin ad odio posuere tristique curae varius.`;

const toggleSpeed = 1000;

const toggleAnimationFinished = function() {
  alert('Animation Finished');
}

$('.my_learning_accordion_content').text(acContent);

$(".parent_accordion").click(function() {
  $(this).next().slideToggle(toggleSpeed, toggleAnimationFinished);
});

.my_learning_accordion_content {
  display: none;
}

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

<h3 >Title</h3>
<div >Accordion content</div>