Basic accordion using jQuery

[mhulse]

Nothing to write home to mom about:

.ap_accordion > :first-child {
	margin-top: 0;
}
.ap_accordion > :last-child {
	margin-bottom: 0;
}
.ap_accordion-toggle {
    cursor: pointer;
    margin: 0;
}
.ap_accordion-panel {
    display: none;
}
.ap_accordion-head {
	font-weight: normal;
	color: #fff;
	background: #1280ac;
	margin: 5px 0 0;
	padding: 5px 10px;
	position: relative;
	cursor: pointer;
    cursor: hand;
}
.ap_accordion-head::after {
	content: "";
    color: #fff;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
    border-top-color: inherit;
    line-height: 0;
    width: 0;
    height: 0;
    position: absolute;
    right: 10px;
    top: 13px;
}
.ap_accordion-head-active::after {
    border-color: transparent;
	border-bottom-color: inherit;
    top: 2px;
}
.ap_accordion-head-active + .ap_accordion-panel {
    display: block;
}
.ap_accordion-panel {
	border: 1px solid #1280ac;
}

.ap_accordion-subhead {
	color: #fff;
	font-weight: normal;
	background: #7FB886;
	margin: 0;
	padding: 5px 10px;
}
.ap_accordion-subhead a,
.ap_accordion-subhead a:visited {
	color: inherit;
	text-decoration: none;
}
.ap_accordion-subhead a:visited:hover,
.ap_accordion-subhead a:focus,
.ap_accordion-subhead a:focus:hover,
.ap_accordion-subhead a:hover,
.ap_accordion-subhead a:active {
	color: inherit;
	text-decoration: underline;
}
.ap_accordion-body {
	padding: 20px;
}
.ap_accordion-body > :first-child {
	margin-top: 0;
}
.ap_accordion-body > :last-child {
	margin-bottom: 0;
}

JS:

$(function() {
    $('body').on('click', '.ap_accordion', function(event) {
        var $head = $(event.target);
        var $this;
        var $next;
        if ($head.hasClass('ap_accordion-head')) {
            var $this = $(this);
            var $next = $head.next();
            $next.slideToggle('fast');
            // // Clean up other panels:
            $this.children('.ap_accordion-panel').not($next).slideUp('fast');
            $this.children('.ap_accordion-head').not($head).removeClass('ap_accordion-head-active');
            if ($head.hasClass('ap_accordion-head-active')) {
                $head.removeClass('ap_accordion-head-active');
            } else {
                $head.addClass('ap_accordion-head-active');
            }
        }
    });
});

HTML:

<div class="ap_accordion">

    <h3 class="ap_accordion-head ap_accordion-head-active">Consider nicotine gum, patches, or pills</h3>
    <div class="ap_accordion-panel">
        <h4 class="ap_accordion-subhead">This can help fight cravings and <u>double</u> your chance of success!</h4>
        <div class="ap_accordion-body">
            <p>Cras malesuada ultrices augue molestie risus.</p>
        </div>
    </div>

    <h3 class="ap_accordion-head">Tell my friends or family</h3>
    <div class="ap_accordion-panel">
        <h4 class="ap_accordion-subhead">It’s easier to quit with support from people who are important to you</h4>
        <div class="ap_accordion-body">
            <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
        </div>
    </div>

    <h3 class="ap_accordion-head">Use something else</h3>
    <div class="ap_accordion-panel">
        <h4 class="ap_accordion-subhead">Like <a href="https://smokingcessationleadership.ucsf.edu/for-smokers/quitline" target="_blank">Quitline</a>, <a href="https://smokefree.gov/" target="_blank">smokefree.gov</a>, or something else</h4>
        <div class="ap_accordion-body">
            <p>Vivamus facilisisnibh scelerisque laoreet.</p>
        </div>
    </div>

</div>