Collapse trick

collapse-trick.markdown

Collapse trick

Add an easy collapse trick adding a open and close item

A Pen by disjfa on CodePen.

License.

index.html

<br />
<div class="container">
  <h3>Just a couple of examples using a open and closing icon</h3>
  <p class="lead">
    I just added a couple of arrows and using bootstrap collapse plugin, wich auto adds a class to animate the arrow. You can check these out on your own. Enjoy.
  </p>
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-header" id="heading-example">
          <h5 class="mb-0">
            <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example">
                <i class="fa fa-chevron-down pull-right"></i>
                Example open and close
            </a>
        </h5>
        </div>
        <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
          <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda itaque asperiores sapiente aut debitis nulla accusantium odit voluptate minima eos quia animi numquam quo atque, saepe autem tempora, reprehenderit facere?
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="something-else">
        <a data-toggle="collapse" href="#or-something-else" aria-expanded="true" class="collapsed">
          <i class="fa fa-hand-o-down"></i> Example open and close
        </a>
        <div id="or-something-else" class="collapse">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia blanditiis, consequatur odit nam quidem cumque impedit alias sint quibusdam temporibus commodi ex praesentium doloribus iste, et laboriosam officia saepe nostrum?</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <ul class="list">
        <li>
          <a data-toggle="collapse" href="#a-list" aria-expanded="true">
            <i class="fa fa-arrow-down pull-right"></i> Example open and close
          </a>
          <ul id="a-list" class="collapse show">
            <li><a href="#">Sub item 1</a></li>
            <li><a href="#">Sub item 2</a></li>
            <li><a href="#">Sub item 3</a></li>
          </ul>
        </li>
      </ul>

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(90deg);
}
.something-else .fa {
  transition: .3s transform ease-in-out;
}
.something-else .collapsed .fa {
  transform: rotate(-90deg);
}
.list .fa {
  transition: .3s transform ease-in-out;
}
.list .collapsed .fa {
  transform: rotate(90deg);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />