Transition opacity text top to down

Question

I have a div, with a given height, that transitions to a bigger height using jQuery. Transition to taller div is smoothed with transition element. Since div expansion transition is linear, with a delay of .5 s, I also use transition to shift 7 lines of text from opacity: 0 to opacity:1. However, I want this transition to go top to down (line 1 a bit faster than line 2, a bit faster than line 3, etc.), following div transition, instead of all lines at once at once. How to do that? Code below:

    $("small").on("click", function() {
      $(".post1").toggleClass("show-post");
    });
    
  

.post1 {
  border: 1px solid grey;
  margin: 20px auto;
  width:33%;
  height:125px;
  padding:0 10px;
  border-radius:4px;
  background:#FFFFFF;
  color:black;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
}

.descr {
  opacity:0;
}

small {
  position:relative;
  left:300px;
  bottom:30px;
}

.show-post {
  height:350px;
}

.show-post .descr{
  opacity:1;
  transition:opacity 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post1">
    <h4>THis is a concert</h4>
    <p>Where: XYZ Arena</p>
    <p>When: XYZ h</p>
    <small>(Click to expand)</small>
    <p class="descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  

Update:

Now my code looks like:

 <script>
    $("small").on("click", function() {
      $(this).parent().toggleClass("show-post");
      $(".first").animate({'opacity':1}, 1000);
      $(".second").animate({'opacity':1}, 2000);
      $(".third").animate({'opacity':1}, 3000);
      $(".fourth").animate({'opacity':1}, 4000);
      $(".fifth").animate({'opacity':1}, 5000);
      $(".sixth").animate({'opacity':1}, 6000);
      $(".seventh").animate({'opacity':1}, 7000);
      $(".eight").animate({'opacity':1}, 8000);
    });
    
  </script>

.descr {
  opacity:0;
}

.first, .second, .third {
  opacity:0;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post">
    <h4>THis is a concert</h4>
    <p>Where: XYZ Arena</p>
    <p>When: XYZ h</p>
    <small>(Click to expand)</small>
    <p class="descr">
      <div class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </div><div class="second">do eiusmod temporincididunt ut labore et dolore magna </div><div class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</div><div class="fourth"> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><div class="fifth"> Duis aute irure dolor in reprehenderit in voluptate velit esse </div><div class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div><div class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit </div><div class="eight">anim id est laborum.</div>
    </p>
  </div>

I haven't added yet all class in the css code but I can see that it works because I can set a different timing for each transition for each line. Now, here goes a rookie question: how can I select all divs under .descr without having to create an extra css element and referring to each individual .class under it: .first, .second, .third. Tried .descr, div but doesn't work. And it's such an easy question that no one asks it and, therefore, can't find answer.

Answer 1

div p div will select all the divs under descr.

Edit: I have made a section (with the toggle css and repeated animation) which works

I have used paragraphs instead of divs for your lines and a section to hold them all in.

$("small").on("click", function () {

    $(this).parent().toggleClass("show-post");
    if ($(this).parent().hasClass ("show-post") && ($('.show-post').css('height') == '500px')) {
    $(".first").animate({
        'opacity': 1
    }, 1000);
    $(".second").animate({
        'opacity': 1
    }, 2000);
    $(".third").animate({
        'opacity': 1
    }, 3000);
    $(".fourth").animate({
        'opacity': 1
    }, 4000);
    $(".fifth").animate({
        'opacity': 1
    }, 5000);
    $(".sixth").animate({
        'opacity': 1
    }, 6000);
    $(".seventh").animate({
        'opacity': 1
    }, 7000);
    $(".eight").animate({
        'opacity': 1
    }, 8000);

} else if (!$(this).parent().hasClass ("show-post")) {
    $(".first").animate({
        'opacity': 0
    }, 1000);
    $(".second").animate({
        'opacity': 0
    }, 2000);
    $(".third").animate({
        'opacity': 0
    }, 3000);
    $(".fourth").animate({
        'opacity': 0
    }, 4000);
    $(".fifth").animate({
        'opacity': 0
    }, 5000);
    $(".sixth").animate({
        'opacity': 0
    }, 6000);
    $(".seventh").animate({
        'opacity': 0
    }, 7000);
    $(".eight").animate({
        'opacity': 0
    }, 8000);

}
});

div section p {
  opacity: 0;
}
.post {
    border: 1px solid grey;
    margin: 20px auto;
    width:200px;
    height:155px;
    padding:0 10px;
    border-radius:4px;
    background:#FFFFFF;
    color:black;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    overflow:hidden;
}

.show-post {
    height:500px;
    opacity:1;
    transition:opacity 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="post">
  <h4>This is a concert</h4>
  <p>Where: XYZ Arena</p>
  <p>When: XYZ h</p>
  <small>(Click to expand)</small>
  <section class="descr">
    <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p>
    <p class="second">do eiusmod temporincididunt ut labore et dolore magna</p>
    <p class="third">aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
    <p class="fourth">ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p class="fifth">Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
    <p class="sixth">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
    <p class="seventh">cupidatat non proident, sunt in culpa qui officia deserunt mollit</p>
    <p class="eight">anim id est laborum.</p>
  </section>
</div>

Here is a fiddle