HTML / AngularJS Code

Output

<!doctype html>
<html ng-app="wender">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js" />
</head>
<body ng-controller="MainCtrl">
    <style type="text/css">
    body {
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
    }
    
    .accordion {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .accordion .item .title {
        margin: 0;
        padding: 10px;
        background-color: #009688;
        border-bottom: 3px solid #CDDC39;
        color: #fff;
        font-weight: 100;
        position: relative;
        cursor: pointer;
    }
    
    .accordion .item .title:after {
        content: '\f078';
        font-family: 'FontAwesome';
        position: absolute;
        top: 10px;
        right: 10px;
        transition: all 0.5s ease;
    }
    
    .accordion .item.open .title:after {
        transform: rotate(180deg);
    }
    
    .accordion .item .content {
        padding: 0;
        margin: 0;
        background-color: #CDDC39;
        transition: all 0.5s ease;
        overflow: hidden;
    }
    
    .accordion .item.open .content {
        height: auto;
    }
    </style>
    <div class="container">
        <div class="row">
            <h1>Angular Simple Accordion</h1>
            <ul class="accordion" simple-accordion>
                <li>
                    <h2>Title test one</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tempor ante, eget ornare magna. Pellentesque cursus cursus erat sodales placerat. Fusce imperdiet auctor tortor at imperdiet. Integer feugiat, purus et pellentesque maximus, purus tortor dictum sem, et pellentesque turpis purus non massa. Donec et tellus nec enim luctus accumsan eget vel diam. Sed vel scelerisque mauris. Etiam porta augue vitae dolor pulvinar, eget faucibus diam posuere. Donec sit amet lobortis quam, at mattis ex. Ut vel suscipit arcu. Aliquam nec sem nec lorem dictum hendrerit. Duis rutrum sit amet magna quis fringilla. Praesent ut sem iaculis, semper turpis ultricies, porta massa. Curabitur id tellus vitae quam ornare tristique sit amet eget sapien. Phasellus imperdiet pretium pharetra. Vestibulum gravida sem id est sagittis placerat. Duis dolor sem, aliquet in velit quis, placerat commodo sapien.
                    </p>
                </li>
                <li>
                    <h2>Title test two</h2>
                    <p>
                        Nunc dignissim varius ipsum, eu ultrices justo euismod vitae. Donec condimentum tortor massa, ac hendrerit lacus convallis eu. Phasellus varius non sem consequat sagittis. Duis consectetur blandit mauris a hendrerit. Quisque ullamcorper dictum mi, in pharetra sem porta vel. Aenean consectetur erat felis, convallis dictum turpis venenatis in. Integer et porttitor lacus. Cras consectetur orci enim. Integer quis ornare elit, ac placerat est. Nam eget laoreet quam. Duis gravida hendrerit ipsum ut posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus suscipit sem tortor, nec pellentesque turpis auctor elementum. Pellentesque congue orci neque, eget egestas enim faucibus id.
                    </p>
                </li>
                <li>
                    <h2>Title test three</h2>
                    <p>
                        Sed laoreet nulla vel nisi auctor semper. Morbi vitae leo convallis, molestie arcu vitae, sodales sem. Curabitur consequat justo nisi. Integer iaculis felis vitae nulla cursus luctus. Ut ut ligula a lectus aliquet pellentesque. Nunc ut vulputate nunc, eu molestie turpis. Fusce urna massa, dapibus et enim quis, ullamcorper iaculis velit. Praesent accumsan ex id mi auctor, eget bibendum odio mollis. Nam ut nisi vulputate, feugiat sapien quis, sodales purus. Vivamus malesuada mauris non felis sagittis, vitae aliquam est commodo. Praesent porta euismod risus eget pulvinar. Aenean ut lobortis ipsum, at tincidunt ex. Suspendisse aliquam tellus nec risus porttitor molestie. Sed urna erat, hendrerit id eleifend et, eleifend sed ante. Ves
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script type="text/javascript" src="js/accordion-directives/angular-simple-accordion.js"></script>
    <script type="text/javascript">
    var app = angular.module('wender', ['simple-accordion']);
    app.controller('MainCtrl', function($scope) {

});
    </script>
</body>
</html>

Angular Simple Accordion

Title test one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tempor ante, eget ornare magna. Pellentesque cursus cursus erat sodales placerat. Fusce imperdiet auctor tortor at imperdiet. Integer feugiat, purus et pellentesque maximus, purus tortor dictum sem, et pellentesque turpis purus non massa. Donec et tellus nec enim luctus accumsan eget vel diam. Sed vel scelerisque mauris. Etiam porta augue vitae dolor pulvinar, eget faucibus diam posuere. Donec sit amet lobortis quam, at mattis ex. Ut vel suscipit arcu. Aliquam nec sem nec lorem dictum hendrerit. Duis rutrum sit amet magna quis fringilla. Praesent ut sem iaculis, semper turpis ultricies, porta massa. Curabitur id tellus vitae quam ornare tristique sit amet eget sapien. Phasellus imperdiet pretium pharetra. Vestibulum gravida sem id est sagittis placerat. Duis dolor sem, aliquet in velit quis, placerat commodo sapien.
Title test two

Nunc dignissim varius ipsum, eu ultrices justo euismod vitae. Donec condimentum tortor massa, ac hendrerit lacus convallis eu. Phasellus varius non sem consequat sagittis. Duis consectetur blandit mauris a hendrerit. Quisque ullamcorper dictum mi, in pharetra sem porta vel. Aenean consectetur erat felis, convallis dictum turpis venenatis in. Integer et porttitor lacus. Cras consectetur orci enim. Integer quis ornare elit, ac placerat est. Nam eget laoreet quam. Duis gravida hendrerit ipsum ut posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus suscipit sem tortor, nec pellentesque turpis auctor elementum. Pellentesque congue orci neque, eget egestas enim faucibus id.
Title test three

Sed laoreet nulla vel nisi auctor semper. Morbi vitae leo convallis, molestie arcu vitae, sodales sem. Curabitur consequat justo nisi. Integer iaculis felis vitae nulla cursus luctus. Ut ut ligula a lectus aliquet pellentesque. Nunc ut vulputate nunc, eu molestie turpis. Fusce urna massa, dapibus et enim quis, ullamcorper iaculis velit. Praesent accumsan ex id mi auctor, eget bibendum odio mollis. Nam ut nisi vulputate, feugiat sapien quis, sodales purus. Vivamus malesuada mauris non felis sagittis, vitae aliquam est commodo. Praesent porta euismod risus eget pulvinar. Aenean ut lobortis ipsum, at tincidunt ex. Suspendisse aliquam tellus nec risus porttitor molestie. Sed urna erat, hendrerit id eleifend et, eleifend sed ante. Ves