accordion

accordion.js

<script>
    	$('.js-accordion__toggle').click(function(e) {
          	e.preventDefault();

            var $this = $(this);
            if ($this.next().hasClass('show')) {
                $this.removeClass('active');
                $this.next().removeClass('show');
                $this.next().slideUp(350);
            } else {
                $this.parent().parent().find('li .c-accordion__title').removeClass('active');
                $this.parent().parent().find('li .c-accordion__content').removeClass('show');
                $this.parent().parent().find('li .c-accordion__content').slideUp(350);
                $this.toggleClass('active');
                $this.next().toggleClass('show');
                $this.next().slideToggle(350);
            }
        });
    </script>

list.html

<ul class="c-accordion">
    					<li>
    						<a href="javascript:void(0)" class="c-accordion__title js-accordion__toggle">
    							Item 1
    						</a>
    						<div class="c-accordion__content">
    							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime assumenda voluptatem alias impedit facere, quas eius natus perspiciatis et, expedita sint officia harum magni iusto porro quam architecto. Perferendis, autem.</p>
    						</div>
    					</li>
                        <li>
                            <a href="javascript:void(0)" class="c-accordion__title js-accordion__toggle">
                                Item 1
                            </a>
                            <div class="c-accordion__content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime assumenda voluptatem alias impedit facere, quas eius natus perspiciatis et, expedita sint officia harum magni iusto porro quam architecto. Perferendis, autem.</p>
                            </div>
                        </li>
    				</ul>

style.scss

.c-accordion {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		padding: 15px 0 15px 20px;
	}

	&__title {
		display: block;
		padding: 10px 0;
		position: relative;
		font-weight: 700;
		color: $c-blue-1;

		&:hover,
		&:focus {
			text-decoration: none;
		}

		&:before {
			content: '\f0da';
			font-family: 'FontAwesome';
			display: inline-block;
			position: absolute;
			left: -20px;
			top: 10px;
			transition: transform 0.5s ease;
		}

		&.active {
			&:before {
				transform: rotate(90deg);
			}
		}
	}

	&__content {
		overflow: hidden;
    display: none;
	}
}