CSS only Read More

by CheapSk8

HTML

<div class="main">
  <div class="left_column">
    <p>
      This is a test paragraph. But it's really short.
    </p>
    <p>
      This is another test paragraph. And it's also really short.
    </p>
  </div>
  <label class="readmore_label" for="readmore">
    Read More
  </label>
  <input type="checkbox" name="readmore" id="readmore" />
  <div class="right_column">
    <div class="right_column_content">
      <p>
        This is a test paragraph. But it's longer than the others.
        This is a test paragraph. But it's longer than the others.
        This is a test paragraph. But it's longer than the others.
      </p>
      <p>
        This is another test paragraph. But it's short again.
      </p>
    </div>
  </div>
  <div class="lower_box">

  </div>
</div>

CSS

.main {
  width: 300px;
  border: 2px solid #606060;
  padding: 6px;
  font-size: 16px;
  color: #333;
  font-family: Verdana;
  height: auto;
}

.main .left_column {
  height: auto;
}

.main .readmore_label {
  cursor: pointer;
  color: #1e4c76;
}

.main .readmore_label:hover {
  font-weight: bold;
  text-decoration: underline;
}

.main #readmore {
  display: none;
}

.main .right_column {
  overflow: hidden;
  border: 1px solid red;
  height: auto;
}

.main .right_column .right_column_content {
  transition: all .5s ease-in;
  margin-top: -100%;
}

.main #readmore:checked + .right_column .right_column_content {
  margin-top: 0%;
  transition: all .5s ease-in;
}

.lower_box {
  width: 100%;
  height: 100px;
  background: #a0522d;
  margin-top: 20px;
}