Resize MDL Card Height On Click To Height of Supporting Text of Card

Question

Resize MDL Card Height On Click To Height of Supporting Text of Card

879 Views Asked by steve At 10 April 2025 at 16:56

I am new to HTML, CSS, and Jquery.

I created the following code for a Material Design Lite (MDL) "card."

Problems: The card will currently resize, but only the space above the title and I need the supporting text section to expand. I also need the supporting text section to expand dynamically only far enough to show all of its' text on the page.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">     </script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
    .article_card {
        width: 95%;
        height: 200px;
        background-color: white;
        text-align: left;
        scroll-behavior: smooth
    }

    .mdl-grid {
        text-align: center;
        justify-content: center;
    }

    .mdl-card__supporting-text {
        height: 70px;
        padding-left: 20px;
    }

    .mdl-button {
        background-color: whitesmoke;
        color: black;
    }

    span+span {
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
</head>

<body>

<div class="mdl-grid">

    <span></span>
    <span class="article_card mdl-card mdl-shadow--8dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">The Article Title</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    This is some of the article1.<br />
                    This is some of the article2.<br />
                    This is some of the article3.<br />
                    This is some of the article4.<br />
                    This is some of the article5.<br />
                    This is some of the article6.<br />
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
                    Read the rest
                    </a>
                </div>
            </span>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(".article_card").click(function() {
        var newHeight = 900
        if ($(".article_card").height() != 200)
            $(".article_card").animate({
                height: 400
            }, 500);
        else
            $(".article_card").animate({
                height: newHeight
            }, 500);
    });
</script>
</body>

</html>

Original Q&A

There are 1 best solutions below

**Brett DeWoody** · Answer 1

Instead of altering the height of the entire .article_card, animate the height of the .mdl-card__supporting-text element. This will cause the entire .article_card to expand in height to show the contents of .mdl-card__supporting-text.

Since we want to animate the height to fit the dynamic content, we'll use max-height instead of height in order for the animation to work.

$(".article_card").click(function() {
  if ($(this).height() > 220 ) {
    $(this).children('.mdl-card__supporting-text').animate({
      maxHeight: '75px'
     }, 500);
  } else {
    $(this).children('.mdl-card__supporting-text').animate({
      maxHeight: '1000px'
    }, 500);
  }
});

.article_card {
  width: 95%;
  background-color: white;
  text-align: left;
  scroll-behavior: smooth;
  padding-top: 0px;
  position: relative;
}
.mdl-grid {
  text-align: center;
  justify-content: center;
}
.mdl-card__supporting-text {
  max-height: 75px;
  padding-left: 20px;
}
.mdl-button {
  background-color: whitesmoke;
  color: black;
}
span+span {
  margin-bottom: 10px;
  margin-top: 10px;
}

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="mdl-grid">

  <span></span>
  <span class="article_card mdl-card mdl-shadow--8dp">
    <div class="mdl-card__title mdl-card--expand">
                    <h2 class="mdl-card__title-text">The Article Title</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    This is some of the article1.<br />
                    This is some of the article2.<br />
                    This is some of the article3.<br />
                    This is some of the article4.<br />
                    This is some of the article5.<br />
                    This is some of the article6.<br />
                    This is some of the article1.<br />
                    This is some of the article2.<br />
                    This is some of the article3.<br />
                    This is some of the article4.<br />
                    This is some of the article5.<br />
                    This is some of the article6.<br />
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
                    Read the rest
                    </a>
                </div>
            </span>

</div>

Resize MDL Card Height On Click To Height of Supporting Text of Card

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in MATERIAL-DESIGN-LITE

Trending Questions

Popular # Hahtags

Popular Questions