Module «accordion». Аккордеон с +

Демо:

https://codepen.io/ildar-meyker/pen/jOKRjGO

Использованные плагины:

https://jquery.com/

https://accordion.js.org/

Подключение:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/accordionjs@2.1.2/accordion.min.js"></script>

Разметка:

<ul class="accordion js-accordion">
    <li class="acc_section">
        <div class="acc_head">Title<i></i></div>
        <div class="acc_content" style="display: none;">
            <div class="accordion__body">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            </div>
        </div>
    </li>
    <li class="acc_section">
        <div class="acc_head">Title <i></i></div>
        <div class="acc_content" style="display: none;">
            <div class="accordion__body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </li>
</ul>

Стили:

.accordion {
    .acc_section {
        border-bottom: 1px solid #000;

        &:not([class*="acc_active"]) {
            i {
                &:before {
                    transform: rotate(-180deg);
                }
                &:after {
                    transform: rotate(-90deg);
                    opacity: 1;
                }
            }
        }

        &:last-child {
            border-bottom: 0;
        }
    }
    

    .acc_head {
        position: relative;
        padding: 2em 4em 2em 2em;
        display: block;
        font-weight: 700;
        cursor: pointer;

        i {
            &:before,
            &:after {
                transition: all .2s;
                transform-origin: 50% 50%;
                content: " ";
                height: 2px;
                background: #000;
                width: 1em;
                position: absolute;
                right: 2rem;
                top: 50%;
                margin-top: -1px;
            }

            &:after {
                opacity: 0;
            }
           
        }
    }

    &__body {
        padding: 0 2em 2em 2em;
    }
}

Инициализация:

$(".js-accordion").each(function () {
	$(this).accordionjs({
		closeAble: true,
		activeIndex: false,
	});
});