Accordion with animated icon

Accordion with animated icon

Bootstrap accordion with animation icon using jquery

HTML:

 

<div class="accordion">
	<div class="accordion">
	    <div class="page_accordion_header arrow_up">Title 1</div>
	    <div class="accordion_content">
	    	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sint odit fuga odio ullam tempore repellendus blanditiis similique laborum cumque officia iste accusamus rem dolorem, harum expedita iure! Assumenda, id.
	    </div>
	</div><!-- accordion -->
	<div class="accordion">
	    <div class="page_accordion_header arrow_up">Title 2</div>
	    <div class="accordion_content">
	    	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sint odit fuga odio ullam tempore repellendus blanditiis similique laborum cumque officia iste accusamus rem dolorem, harum expedita iure! Assumenda, id.
	    </div>
	</div><!-- accordion -->
	<div class="accordion">
	    <div class="page_accordion_header arrow_up">Title 3</div>
	    <div class="accordion_content">
	    	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sint odit fuga odio ullam tempore repellendus blanditiis similique laborum cumque officia iste accusamus rem dolorem, harum expedita iure! Assumenda, id.
	    </div>
	</div><!-- accordion -->
</div>

 

CSS:

 

.page_accordion_header {
    background: #eee;
    color: #000;
    padding: 15px 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.arrow_up::after{
  font-family: 'FontAwesome';
  content: "\f078";
  float: right;
  transform: rotate(0deg);
  transition: transform 200ms ease-in-out;
}

.arrow_down::after{
  font-family: 'FontAwesome';
  content: "\f078";
  float: right;
  transform: rotate(180deg);
  transition: transform 200ms ease-in-out;
}

.accordion_content {
    background: #fff;
    color: #000;
    padding: 5px 10px 10px;
    border-top: 1px solid #ddd;
    font-size: 14px;
    display: none;
}

.accordion{
  margin-bottom: 15px;
}

 

Jquery:

 

$(function(){
    $(".accordion").on("click", ".page_accordion_header", function() {
        $(this).toggleClass("active").next().slideToggle();
        $(this).toggleClass('arrow_up').toggleClass('arrow_down');
    });
})