<section id="content">

		<div id="accordion" class="accordion-container">
				<article class="content-entry">
						<h4 class="article-title"><i></i>Accordion Title 1</h4>
						<div class="accordion-content">
								<p>Accordion content 1</p>
						</div>
						<!--/.accordion-content-->
				</article>

				<article class="content-entry">
						<h4 class="article-title"><i></i>Accordion Title 2</h4>
						<div class="accordion-content">
								<p>Accordion content 2</p>
						</div>
						<!--/.accordion-content-->
				</article>

				<article class="content-entry">
						<h4 class="article-title"><i></i>Accordion Title 3</h4>
						<div class="accordion-content">
								<p>Accordion content 3</p>
						</div>
						<!--/.accordion-content-->
				</article>

				<article class="content-entry">
						<h4 class="article-title"><i></i>Accordion Title 4</h4>
						<div class="accordion-content">
								<p>Accordion content 4</p>
						</div>
						<!--/.accordion-content-->
				</article>

		</div>
		<!--/#accordion-->

		<div id="description">
				<h2>jQuery Accordion Toggle</h2>
				<p>This simple accordion toggle is a variation on the <a href="https://www.jqueryscript.net/menu/Super-Smooth-Accordion-Dropdown-Menu-with-jQuery-CSS3.html" target="_blank">Super Smooth Accordion Dropdown Menu tutorial</a> on jQueryScript.net. I used
						it to create a FAQ section for a project recently, but it can easily be adapted for any kind of content.</p>

		</div>

</section>
<!--/#content-->
.accordion-container {
		position: relative;
		width: 100%;
		border: 1px solid #0079c1;
		border-top: none;
		outline: 0;
		cursor: pointer
}

.accordion-container .article-title {
		display: block;
		position: relative;
		margin: 0;
		padding: 0.625em 0.625em 0.625em 2em;
		border-top: 1px solid #0079c1;
		font-size: 1.25em;
		font-weight: normal;
		color: #0079c1;
		cursor: pointer;
}

.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
		background-color: #00aaa7;
		color: white;
}

.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
		color: white;
}

.accordion-container .content-entry i {
		position: absolute;
		top: 3px;
		left: 12px;
		font-style: normal;
		font-size: 1.625em;
		sans-serif;
		color: #0079c1;
}

.accordion-container .content-entry i:before {
		content: "+ ";
}

.accordion-container .content-entry.open i:before {
		content: "- ";
}

.accordion-content {
		display: none;
		padding-left: 2.3125em;
}
/* This stuff is just for the Codepen demo */

#content {
		width: 100%;
}

.accordion-container,
#description {
		width: 90%;
		margin: 1.875em auto;
}

#description p {
		line-height: 1.5;
}

#description h2 {
		text-align: center;
}

@media all and (min-width: 860px) {
		#content {
				width: 70%;
				margin: 0 auto;
		}
}
$(function() {
		var Accordion = function(el, multiple) {
				this.el = el || {};
				this.multiple = multiple || false;

				var links = this.el.find('.article-title');
				links.on('click', {
						el: this.el,
						multiple: this.multiple
				}, this.dropdown)
		}

		Accordion.prototype.dropdown = function(e) {
				var $el = e.data.el;
				$this = $(this),
						$next = $this.next();

				$next.slideToggle();
				$this.parent().toggleClass('open');

				if (!e.data.multiple) {
						$el.find('.accordion-content').not($next).slideUp().parent().removeClass('open');
				};
		}
		var accordion = new Accordion($('.accordion-container'), false);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js