Animating the height of a div using nested div elements

Question

Animating the height of a div using nested div elements

Below is the code snippet provided: https://jsfiddle.net/wc48jvgt/69/

The situation involves a div with a horizontal layout named #cleaning_card_1, containing embedded divs that act as borders, and a vertical div called #cleaning_card_right_1 with a nested div #cleaning_card_right_content_1. Within this final div are multiple dynamic amount of divs. The objective is to make #cleaning_card_right_1 function like a dropdown menu. A simple function has been created for this purpose:

function maximizeCleaningCard () {

    var cleaning_card_number = $(this).attr('number')

    $(this).animate({width: '97%'}, 200, function () {
        $('#cleaning_card_right_' + cleaning_card_number).removeClass('cleaning_card_right').addClass('cleaning_card_right_maximized')
        $('#cleaning_card_right_' + cleaning_card_number).animate({height: 400}, 400)
        $('#cleaning_card_right_content_' + cleaning_card_number).animate({height: 400 - 80}, 400)
        $('#cleaning_card_right_left_border_1, #cleaning_card_right_right_border_1').animate({height: 400 - 80}, 400)
    })

}

$('.cleaning_card').click(maximizeCleaningCard)

While the animation runs smoothly on #cleaning_card_1 and border divs, the issue arises with the animation of #cleaning_card_right_content_1. It appears suddenly without any animation. Removing nested items allows the animation to work correctly. The assumption is that the height of the div is not zero due to the nested elements causing the problem. How can this issue be resolved?

html jquery css

Answer 1

Answer №1

It came to my attention that you are utilizing multiple divs to achieve simultaneous vertical animation. A more efficient approach would be to simplify your div layout by using only 2 animates to accomplish the desired sequence.

I have eliminated unnecessary divs and applied more practical CSS to achieve the same outcome. While it may not be ideal for your final implementation, it should set you in the right direction.

In addition, I have included a minimizing sequence utilizing the class .maximized to indicate the state of the cleaning card and which sequence to execute.

You can also view a live demo on JSFiddle here: https://jsfiddle.net/joshmoto/0ynrm1ts/2/

For detailed information on the functionality, please refer to the comments within the script...

// function to maximize the cleaning card
function maximizeCleaningCard() {

  // store the current clicked cleaning card for later use in animate
  let cleaningCard = this;
  
  // set variable for cleaning card right element
  let cleaningCardRight = $('.cleaning_card_right', cleaningCard);
  
  // check if there is a cleaning card right element
  if($(cleaningCardRight).length) {
    
    // set variable for cleaning card right content
    let cleaningCardRightContent = $('.cleaning_card_right_content', cleaningCardRight);
  
    // if cleaning card has maximized class
    if($(cleaningCard).hasClass('maximized')) {

      // remove the maximized class
      $(cleaningCard).removeClass('maximized');

      // animate the cleaning card right element to close
      $(cleaningCardRight).animate({
          height: '0px'
        }, 500, function() {

          // once cleaning card right is fully closed
          // complete the closing sequence by animating the cleaning card width
          $(cleaningCard).animate({
            width: '70%'
          }, 500 );

        });

    // if cleaning card does not have maximized class
    } else {
      
      // add the maximized class
      $(cleaningCard).addClass('maximized');
      
      // animate the cleaning card width to expand to 100%
      $(cleaningCard).animate({
        width: '100%'
      }, 500, function() {
      
        // once the cleaning card is fully open
        // animate the cleaning card right element to show all content
        $(cleaningCardRight).animate({
          height: $(cleaningCardRightContent).outerHeight()
        }, 500 );

      });

    }
  
  }
  
}

// trigger maximizeCleaningCard function when cleaning card is clicked
$(document).on('click','.cleaning_card', maximizeCleaningCard );

BODY {
  padding: 15px;
  margin: 0;
}

.cleaning_card {
  position: relative;
  width: 70%;
  border: 1px solid black;
  height: 80px;
  font-size: 15px;
  overflow: visible;
  margin-bottom: 15px;
}

.cleaning_card:hover {
  cursor: pointer;
}

.cleaning_card_right {
  position: absolute;
  width: 25%;
  height: 0;
  background-color: white;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  overflow: hidden;
  top: 100%;
  right: -1px;
}

.cleaning_card_right_content {
  position: relative;
  padding: 5px;
  overflow: hidden;
}

.cleaning_card_right_content_item {
  position: relative;
  background-color: cornsilk;
}

<div id="cleaning_card_1" class="cleaning_card">

  <div class="cleaning_card_right">

    <div class="cleaning_card_right_content">

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Standard </div>
        <div class="cleaning_card_right_value"> 1 </div>
      </div>

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Junior Suite </div>
        <div class="cleaning_card_right_value"> 2 </div>
      </div>
      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Lux </div>
        <div class="cleaning_card_right_value"> 3 </div>
      </div>

    </div>

  </div>

</div>

Answer 2

It came to my attention that you are utilizing multiple divs to achieve simultaneous vertical animation. A more efficient approach would be to simplify your div layout by using only 2 animates to accomplish the desired sequence.

I have eliminated unnecessary divs and applied more practical CSS to achieve the same outcome. While it may not be ideal for your final implementation, it should set you in the right direction.

In addition, I have included a minimizing sequence utilizing the class .maximized to indicate the state of the cleaning card and which sequence to execute.

You can also view a live demo on JSFiddle here: https://jsfiddle.net/joshmoto/0ynrm1ts/2/

For detailed information on the functionality, please refer to the comments within the script...

// function to maximize the cleaning card
function maximizeCleaningCard() {

  // store the current clicked cleaning card for later use in animate
  let cleaningCard = this;
  
  // set variable for cleaning card right element
  let cleaningCardRight = $('.cleaning_card_right', cleaningCard);
  
  // check if there is a cleaning card right element
  if($(cleaningCardRight).length) {
    
    // set variable for cleaning card right content
    let cleaningCardRightContent = $('.cleaning_card_right_content', cleaningCardRight);
  
    // if cleaning card has maximized class
    if($(cleaningCard).hasClass('maximized')) {

      // remove the maximized class
      $(cleaningCard).removeClass('maximized');

      // animate the cleaning card right element to close
      $(cleaningCardRight).animate({
          height: '0px'
        }, 500, function() {

          // once cleaning card right is fully closed
          // complete the closing sequence by animating the cleaning card width
          $(cleaningCard).animate({
            width: '70%'
          }, 500 );

        });

    // if cleaning card does not have maximized class
    } else {
      
      // add the maximized class
      $(cleaningCard).addClass('maximized');
      
      // animate the cleaning card width to expand to 100%
      $(cleaningCard).animate({
        width: '100%'
      }, 500, function() {
      
        // once the cleaning card is fully open
        // animate the cleaning card right element to show all content
        $(cleaningCardRight).animate({
          height: $(cleaningCardRightContent).outerHeight()
        }, 500 );

      });

    }
  
  }
  
}

// trigger maximizeCleaningCard function when cleaning card is clicked
$(document).on('click','.cleaning_card', maximizeCleaningCard );

BODY {
  padding: 15px;
  margin: 0;
}

.cleaning_card {
  position: relative;
  width: 70%;
  border: 1px solid black;
  height: 80px;
  font-size: 15px;
  overflow: visible;
  margin-bottom: 15px;
}

.cleaning_card:hover {
  cursor: pointer;
}

.cleaning_card_right {
  position: absolute;
  width: 25%;
  height: 0;
  background-color: white;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  overflow: hidden;
  top: 100%;
  right: -1px;
}

.cleaning_card_right_content {
  position: relative;
  padding: 5px;
  overflow: hidden;
}

.cleaning_card_right_content_item {
  position: relative;
  background-color: cornsilk;
}

<div id="cleaning_card_1" class="cleaning_card">

  <div class="cleaning_card_right">

    <div class="cleaning_card_right_content">

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Standard </div>
        <div class="cleaning_card_right_value"> 1 </div>
      </div>

      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Junior Suite </div>
        <div class="cleaning_card_right_value"> 2 </div>
      </div>
      <div class="cleaning_card_right_content_item">
        <div class="cleaning_card_right_category"> Lux </div>
        <div class="cleaning_card_right_value"> 3 </div>
      </div>

    </div>

  </div>

</div>

Animating the height of a div using nested div elements

Answer №1

Similar questions

Avoid displaying a popup menu on the webpage during page refresh

Unable to modify src using .attr() on an ng-repeat and ng-click combination is not functioning as expected

Getting access to the current row along with its value within an AngularJS application

How to Use jQuery Post Method to Submit a Form Without Redirecting

Is there a way I can utilize a for-loop and if statement in JavaScript to present the information accurately within the table?

The hidden Bootstrap modal only reveals itself when the button is clicked, staying concealed in the background upon page load

Conceal the scrollbar track while displaying the scrollbar thumb

Streamlining input options with a single label for multiple selections (radio buttons)

What is the best method to modify and access imported .css files within the WordPress style.css file?

Tips for wrapping the content of a <span> element within a <td> element

Sending data through a simulated click does not result in transmission to the Nodejs server

What are some strategies for blocking URL access to a controller's method in Rails 3?

Guide to creating a dynamic jQuery autocomplete feature with AJAX in a JSP application

How to use jQuery to send a POST request and receive an entire HTML

Using jQuery AJAX on Windows Azure doesn't automatically redirect and successfully retrieves JSON data from server

The code functions properly on React Webpack when running on localhost, however, it fails to work once deployed to AWS Amplify

Angular Material: div not being filled by layout-fill

Encountering a 415 Error in Spring MVC: Unrecognized Media Type Issue

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

Concealing Angular Features Using a Button