Как добавить класс активной вкладке accordion?

Question

[defreshy]

Как добавить класс .card-header, к примеру active-accordion, когда выбрана эта вкладка? Сейчас скрипт я так понимаю просто добавляет и убирает display

<div class="faq-accordion">
	<div class="js-accordion">
		<div class="card">
			<div class="card-header">
				<button class="btn btn-link expanded" type="button">
					<span>1</span>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
						<path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z">
						</path>
					</svg>
				</button>
			</div>
			<div class="collapse" style="display: block;">
				<div class="card-body">
					Anim pariatur cliche reprehenderit, enim eiusmod high life
				</div>
			</div>
		</div>

		<div class="card">
			<div class="card-header">
				<button class="btn btn-link expanded" type="button">
					<span>2</span>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
						<path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z">
						</path>
					</svg>
				</button>
			</div>
			<div class="collapse">
				<div class="card-body">
					Anim pariatur cliche reprehenderit, enim eiusmod high life
				</div>
			</div>
		</div>
	</div>
</div>

var js_accordion = $(".js-accordion"),
		collapse_trigger = $(".btn-link");
	if (js_accordion.length > 0) {

		js_accordion
			.find(".card")
			.first()
			.find(".collapse")
			.css("display", "block");

		js_accordion
			.find(".card")
			.first()
			.find(".btn-link")
			.addClass("expanded");

		$("body").on("click", '.btn-link', function() {
			var currentCollapse = $(this)
			.closest(".card")
			.find(".collapse"),
				remainingCollapse = $(this)
			.closest(js_accordion)
			.find(".collapse")
			.not(currentCollapse),
				remainingBtn = $(this)
			.closest(js_accordion)
			.find(".btn-link")
			.not(this);

			currentCollapse.slideToggle();
			$(this).toggleClass("expanded");

			remainingCollapse.slideUp();
			remainingBtn.removeClass("expanded");
		});
	}

Answer 1

[cryowning]

Вместо твоего кода сделал вот так:

$('.card-header').click(function() {
    $(this).toggleClass('active-accordion').next().slideToggle();
    $('.card-header').not(this).removeClass('active-accordion').next().slideUp();
});

<style>
        .collapse {
            display: none;
        }
    </style>

    <div class="faq-accordion">
        <div class="js-accordion">
            <div class="card">
                <div class="card-header">
                    <button class="btn btn-link" type="button">
                <span>1</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                  <path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z">
                  </path>
                </svg>
              </button>
                </div>
                <div class="collapse" style="display: block;">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <button class="btn btn-link" type="button">
                <span>2</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                  <path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z">
                  </path>
                </svg>
              </button>
                </div>
                <div class="collapse">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life
                    </div>
                </div>
            </div>
        </div>
    </div>