Как исправить поведение аккордеона?

Question

С гармошкой раньше не сталкивался, по этому интересует такой момент в ее поведении. Если, например, нажимать по очереди 1 и 2 элементы(или например последний и предпоследний), то постепенно эта секция уезжает за пределы экрана на следующий блок. Это нормальное явление или можно как то исправить?

https://codepen.io/sergey112/pen/jOqGNqv

const mainFunction = (e) => {
    const accordions = document.querySelectorAll(".faq__content-accordion");


    const vault = {
        panel: "accordion__panel",
        button: "accordion__button"
    };

    const classes = {
        activeContent: "accordion__panel-active",
        activeButton: "accordion__button-active"
    };

    const elementButtons = document.querySelectorAll(`.${vault.button}`);
    const elementPanels = document.querySelectorAll(`.${vault.panel}`);

    const accordionEvent = (accordion) => {
        const button = accordion.querySelector(`.${vault.button}`);
        const panel = accordion.querySelector(`.${vault.panel}`);

        const buttonToggleActive = () => {

            elementButtons.forEach((n) => {
                n !== button ? n.classList.remove(classes.activeButton) : null;

            });

            button.classList.toggle(classes.activeButton);
        };

        const panelToggleActive = () => {

            elementPanels.forEach((n) =>
                n !== panel ? n.classList.remove(classes.activeContent) : null
            );
            panel.classList.toggle(classes.activeContent);
            panel.style.setProperty("--height", `${panel.scrollHeight}px`);


        };

        button.addEventListener("click", panelToggleActive);
        button.addEventListener("click", buttonToggleActive);
    };

    accordions.forEach((element) => accordionEvent(element));
};

document.addEventListener("DOMContentLoaded", mainFunction);

   .faq {
        padding: 176px 0 174px;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .faq__content {
        width: 743px;
        height: 614px;
        display: flex;
        flex-direction: column;
    }
    
    .faq__content-customer {
        padding: 0;
        margin: 0 auto;
        width: 99px;
        height: 12px;
        font-family: Roboto;
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #3D4F9F;
    }
    
    .faq__content-title {
        width: 311px;
        height: 30px;
        padding: 0;
        margin: 20px auto 0;
        font-family: Quicksand;
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        color: #3D4F9F;
    }
    
    .faq__content-accordions:first-of-type {
        padding-top: 55px;
    }
    
    .faq__content-accordions {
        width: 100%;
        width: 743px;
        padding: 0;
    }
    
    .faq__content-accordion {
        width: 100%;
        height: auto;
    }
    
    .accordion__slot {
        width: 100%;
        display: block;
    }
    
    .accordion__slot:nth-child(2n) {
        border-bottom: 1px solid #D8E3FE;
    }
    
    .accordion__button {
        border-radius: 5px;
        cursor: pointer;
        padding: 27px 20px 25px 55px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: color 500ms ease;
        position: relative;
        font-family: Quicksand;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        line-height: 19px;
        display: flex;
        align-items: center;
        letter-spacing: 0.03em;
        color: #8E96B7;
        background-color: #FFFFFF;
    }
    
    .accordion__button:hover {
        color: #042c73;
    }
    
    .accordion__button::before {
        transition: transform 500ms;
        width: 14px;
        height: 14px;
        display: block;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 37px;
        left: 24px;
        content: "";
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(./images/faq-image.svg);
    }
    
    .accordion__button-active::before {
        transform: translate(-50%, -50%) rotate(-180deg);
    }
    
    .accordion__button-active {
        color: #760284;
    }
    
    .accordion__panel {
        overflow: hidden;
        max-height: 0;
        visibility: hidden;
        padding: 0 5px;
        transition: visibility 500ms, max-height 600ms;
        transition-timing-function: cubic-bezier(0.694, 0.0482, 0.335, 1);
    }
    
    .accordion__panel-active {
        max-height: var(--height, 0);
        visibility: visible;
    }
    
    .accordion-panel__content {
        padding: 16px 0 52px 80px;
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 27px;
        letter-spacing: 0.03em;
        color: #8D96BD;
        margin: 0;
        user-select: none;
        max-width: 400px;
        border: none;
    }

.qwe12{
  height:1000px;
  border:1px red solid;
}

<div class="main">
  <section class="qwe12"></section>
<section class="faq">
            <div class="faq__content">
                <h3 class="faq__content-customer">Customer help</h3>
                <h2 class="faq__content-title">Frequently asked questions</h2>
                <div class="faq__content-accordions">
                    <div class="faq__content-accordion">
                        <div class="accordion__slot">
                            <button class="accordion__button">Reque insolens in vel?</button>
                        </div>
                        <div class="accordion__slot">
                            <div class="accordion__panel">
                                <p class="accordion-panel__content">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="faq__content-accordions">
                    <div class="faq__content-accordion">
                        <div class="accordion__slot">
                            <button class="accordion__button">Vis rebum error graecis ea, id sit postea accusamus?</button>
                        </div>
                        <div class="accordion__slot">
                            <div class="accordion__panel">
                                <p class="accordion-panel__content">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="faq__content-accordions">
                    <div class="faq__content-accordion">
                        <div class="accordion__slot">
                            <button class="accordion__button">Lorem repudiandae ne nec?</button>
                        </div>
                        <div class="accordion__slot">
                            <div class="accordion__panel">
                                <p class="accordion-panel__content">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="faq__content-accordions">
                    <div class="faq__content-accordion">
                        <div class="accordion__slot">
                            <button class="accordion__button">Ad dicit numquam vel. Et eos iudico feugait percipitur?</button>
                        </div>
                        <div class="accordion__slot">
                            <div class="accordion__panel">
                                <p class="accordion-panel__content">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="faq__content-accordions">
                    <div class="faq__content-accordion">
                        <div class="accordion__slot">
                            <button class="accordion__button">Sea no dico percipitur. Fierent constituam definitiones id eum?</button>
                        </div>
                        <div class="accordion__slot">
                            <div class="accordion__panel">
                                <p class="accordion-panel__content">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti.</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
<section class="qwe12"></section></div>

БЛОГ НА HUSL

Как исправить поведение аккордеона?

Ответы (0 шт):