CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Grzes Slania
Grzes Slania

Reputation: 602

CSS transition not working on collapse

I created a read more button that toggles a paragraph. I am using default bootstrap classes for the collapse. The class collapsing doesnt seem to make the CSS transition. Heres the codepen link http://codepen.io/theMugician/pen/YNWmWK

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 1s ease;
}

.collapse.in {
  height: 200px;
}

$(document).ready(function() {

$("#read-more-1").click(function(){
      console.log("click works");
      if($("#read-block-1").hasClass("in")) {
         $("#read-block-1")
            .addClass('collapsing')
            .removeClass('in')
            .removeClass('collapsing')
      }else{
        $("#read-block-1")
            .addClass('collapsing')
            .addClass("in")
            .removeClass('collapsing')
      }
   })
})

Upvotes: 0

Views: 7929

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105923

you can set the overflow on the parent container, use line-height to control height of container and numbers of line.

You can use max-height instead height, so it won't grow more tha needed.

finally, just toggle the class where height or max-height will be added.

example

$(document).ready(function() {

  $("#read-more-1").click(function() {
    $(".collapse").toggleClass('in');
  })
})
p {
  max-height: 1.6em;
  line-height: 1.6em;
  padding: 0;
  overflow: hidden;
  transition: max-height 1s ease;
}
.in {
  max-height: 48em;/* 1.6 x lines max here an average 30 lines */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="collapse">A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the ring band, hardwood fitted base and cover with agate
  finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to
  health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A
  new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720).
  The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's
  peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this
  time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf</p>
<a id="read-more-1">read more</a>

Upvotes: 1

max
max

Reputation: 8667

You are adding collapsing class and you immediately removing it. Second problem is that collapse class has display: none from Bootstrap CSS and you can't animate display property.

You can simplify your code to something like this:

CSS:

.collapse {
  display: block;
  transition: height 1s ease;
  height: 0;
  overflow: hidden;
}
.collapse.in {
  height: 200px;
}

JS:

var readBlock = $('#read-block-1');

$("#read-more-1").click(function() {

  if (readBlock.hasClass("in")) {
    readBlock.removeClass('in');
  } else {
    readBlock.addClass("in");
  }

});

This solutions is not perfect because it breaks the collapsed content to next line.

CODEPEN

To avoid that you can transition your whole paragraph (set height for paragraph, for example 50px and when you click the button, change it to for example 200px).

HTML:

<p class="collapse">..........</p>
<a id="read-more-1">read more</a>

CSS:

.collapse {
  display: block;
  transition: height 1s ease;
  height: 50px;
  overflow: hidden;
}
.collapse.in {
  height: 200px;
}

JS:

var readBlock = $('p');

$("#read-more-1").click(function() {

  if (readBlock.hasClass("in")) {
    readBlock.removeClass('in');
  } else {
    readBlock.addClass("in");
  }

});

CODEPEN

Upvotes: 2

DavidDomain
DavidDomain

Reputation: 15293

Just use the BS collapse.js plugin. That is what it's for.

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the
  <div class="collapse" id="collapseExample">
    ring band, hardwood fitted base and cover with agate finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720). The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf
  </div>
</div>
<a type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  read more
</a>

Upvotes: 0

Max Sindwani
Max Sindwani

Reputation: 1267

The collapsing class is unnecessary. All you need is to toggle the height to trigger the transition. Also, the text needs to be a block element to have the height property respected

$(document).ready(function() {

$("#read-more-1").click(function(){
      $("#read-block-1").toggleClass('in');
   })
})
.collapsable {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 1s ease;
    display: block;
}

.collapsable.in {
  height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the  <span class="collapsable" id="read-block-1">ring band, hardwood fitted base and cover with agate finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720). The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf</span></p>
                              <a id="read-more-1">read more</a>

Upvotes: 0

Related Questions