Basic accordion using jQuery

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>

mhulse / css-issues

Basic accordion using jQuery #188