A tricky way to have a responsive "read more/accordion" content.

index.html

<div class="item">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, id! Nam maiores, in odio maxime ea omnis. Inventore eos, quibusdam distinctio excepturi maiores ab facilis repellendus numquam reiciendis nemo, labore!</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, id! Nam maiores, in odio maxime ea omnis. Inventore eos, quibusdam distinctio excepturi maiores ab facilis repellendus numquam reiciendis nemo, labore!</p>
  <buttom class="read-more">Read <span class="more">more</span>  <span class="less">less</span></buttom>
</div>
<div class="item">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dicta repudiandae sunt explicabo mn.</p>
  <buttom class="read-more">Read <span class="more">more</span>  <span class="less">less</span></buttom>
</div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Read-More-Pattern.markdown

Read More Pattern

A tricky way to have responsive "read more"/accordion content.

A Pen by Isaac Rankin on CodePen.

License.

script.js

$('.item .read-more').click(function(e){
  e.preventDefault();
  $(e.currentTarget).parent('.item').toggleClass('open');
});

style.css

.item{
  max-height: 120px;
  max-width: 600px;
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}

.item p:last-of-type{
  margin-bottom: 0;
  padding-bottom: 0;
}

.item.open{
  max-height: none;
  padding-bottom: 1.2em;
}

.item.open .read-more{
  top: auto;
  bottom: 0;
}

.item.open .read-more .less{
  display: inline-block;
}

.item.open .read-more .more{
  display: none;
}

.read-more{
  position: absolute;
  width: 100%;
  height: 1.2em;
  top: 105px;
  background-color: #FFF;
  color: red;
}

.read-more:hover{
  cursor: pointer;
}

.read-more .less{
  display: none;
}