On click expand div with transition

Question

I'm making a div that expands its height on click. I tried a few methods I found here already but didn't work for me.

jQuery('.readMore').click(function() {
  jQuery(this).parent().toggleClass('rm-cont-hidden');
});

.rm-container {
  float: left;
  width: 100%;
  background: #f7f7f7;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  color: #777;
}

.rm-text {
  float: left;
  width: 100%;
}

.rm-container.rm-cont-hidden .rm-text {
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.rm-container .rm-text {
  max-height: auto;
  transition: max-height 0.3s ease-in;
}

.readMore {
  float: left;
  width: 100%;
  color: blue;
  text-align: center;
  padding: 5px 0px 0px 0px;
  font-size: 16px;
}

.readMore:hover {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4">


      <div class="rm-container rm-cont-hidden">

        <div class="rm-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div class="readMore">
          +
        </div>

      </div>


    </div>
  </div>
</div>

I want the div to "open/expand" with a transition.

You should make exact max-height, don't use max-height: auto. https://jsfiddle.net/yetb8ntp/3/ — Zhenya Telegin, Oct 06 '17 at 09:35

score 0 · Answer 1 · answered Oct 06 '17 at 09:43

0

toggleSlide()

sliding animations using jquery can be used for expand and collapse functions or slideUp() or slideDown() can be used alternatively instead(BTW it is a lengthy process)

answered Oct 06 '17 at 09:43

wolferkamal

26
7

RaJesh RiJo · Answer 2 · 2017-10-06T09:49:47.100

You cannot use auto height/width for transition. One of the easiest way to get the result is to set a exact value to animate it using transition. Check this link for more details and other options to get output. Check below snippet for reference.

jQuery('.readMore').click(function() {
  jQuery(this).parent().toggleClass('rm-cont-hidden');
});

.rm-container {
  float: left;
  width: 100%;
  background: #f7f7f7;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  color: #777;
}

.rm-text {
  float: left;
  width: 100%;
}

.rm-container.rm-cont-hidden .rm-text {
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.rm-container .rm-text {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

.readMore {
  float: left;
  width: 100%;
  color: blue;
  text-align: center;
  padding: 5px 0px 0px 0px;
  font-size: 16px;
}

.readMore:hover {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4">


      <div class="rm-container rm-cont-hidden">

        <div class="rm-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div class="readMore">
          +
        </div>

      </div>


    </div>
  </div>
</div>

I can't use a set ma height as there will be many elements using this structure with different amount of content. And i dont want to jam in too much js. — mheonyae, Oct 06 '17 at 09:49
check on this https://css-tricks.com/using-css-transitions-auto-dimensions/ — RaJesh RiJo, Oct 06 '17 at 09:50

On click expand div with transition

2 Answers2