Ви додали акордеон в Elementor, заповнили FAQ-секцію, зберегли сторінку й бачите, що перший пункт розкрито. Ви його не відкривали. Але Elementor вирішив за вас. Поведінка зашита у віджет намертво й у налаштуваннях не змінюється. Для лендингу з охайною структурою це виглядає неохайно, а якщо перший блок об’ємний, ламає візуальний ритм усієї сторінки.

Проблемі багато років. Офіційна документація прямо заявляє: «The first item of the Accordion widget is expanded on page load». І все. Але дивитися на примусово розкритий акордеон не обов’язково. Рішень чотири, далі кожне з інструкцією.

Нижче способи закрити акордеон Elementor за замовчуванням: від сніпета на 30 секунд до нативних альтернатив і аддонів із галочкою в інтерфейсі. Методи перевірено на Elementor 3.27-4.2 (Free і Pro), працюють на десктопі та мобільних.

💡 Швидкий огляд:

• Вставте JavaScript-сніпет у HTML-віджет або Custom Code, акордеон закриється через 100 мс після завантаження
• Замініть Accordion на Toggle, вбудований віджет Elementor, усі вкладки закриті з коробки
• Для мінімалістів: CSS-правило ховає перший елемент без жодного рядка JavaScript
• Установіть The Plus Addons або Essential Addons, отримайте нативний перемикач «Перша вкладка відкрита» прямо в налаштуваннях віджета

Метод 1: JavaScript-сніпет, універсальний

Найнадійніший спосіб. Elementor додає клас elementor-active першому елементу акордеона під час завантаження. Потрібно лише дочекатися рендерингу й зняти цей клас.

Сніпет на чистому JavaScript, без jQuery:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        const firstItem = document.querySelector('.elementor-accordion-item:first-child');
5
        if (firstItem) {
6
            const title = firstItem.querySelector('.elementor-tab-title');
7
            const content = firstItem.querySelector('.elementor-tab-content');
8
            if (title) title.classList.remove('elementor-active');
9
            if (content) {
10
                content.classList.remove('elementor-active');
11
                content.style.display = 'none';
12
            }
13
        }
14
    }, 100);
15
});
16
</script>

Затримка setTimeout у 100 мілісекунд критична. Без неї скрипт спрацьовує до того, як Elementor завершить ініціалізацію акордеона, класи просто не знімуться. На повільних хостингах або сторінках із десятком віджетів підніміть до 300-500 мс. Користувачі Elementor підтверджують на форумі: метод стабільний аж до версії 4.2.

Куди вставити. Два варіанти. Перший, HTML-віджет: перетягніть його прямо над акордеоном у редакторі та вставте сніпет. Код спрацює тільки на конкретній сторінці й не вантажиться там, де акордеона немає. Другий, Elementor → Custom Code в адмінці WordPress: створіть запис, виберіть Location body, опублікуйте. Код застосується глобально, зручно, коли акордеони розкидані по десятку сторінок.

Якщо акордеонів кілька й потрібно закрити їх усі, замініть querySelector на querySelectorAll і обійдіть колекцію:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        document.querySelectorAll('.elementor-accordion-item').forEach(function(item) {
5
            const title = item.querySelector('.elementor-tab-title');
6
            const content = item.querySelector('.elementor-tab-content');
7
            if (title) title.classList.remove('elementor-active');
8
            if (content) {
9
                content.classList.remove('elementor-active');
10
                content.style.display = 'none';
11
            }
12
        });
13
    }, 100);
14
});
15
</script>

Не спрацювало з першої спроби? Майже завжди справа в таймінгу, підніміть затримку до 1000 мс.

Метод 2: віджет Toggle замість Accordion

Найпростіший нативний спосіб, не боротися з акордеоном, а взяти інший віджет. Elementor постачає два зовні схожі, але різні за поведінкою інструменти: Accordion і Toggle.

Принципова різниця:

Toggle візуально не відрізнити від Accordion: ті самі заголовки, ті самі іконки стрілок, та сама анімація. Але всі вкладки закриті з коробки, жодного коду. Відкрийте панель віджетів, знайдіть Toggle, перетягніть на сторінку та додайте елементи як в Accordion. Готово.

Єдиний нюанс: Toggle дозволяє розкрити одразу кілька вкладок. Якщо логіка «один відкритий, решта закриті» важлива, повертайтеся до Методу 1.

Метод 3: CSS, мінімалістичний

JavaScript здається надмірним? Закрийте перший елемент чистим CSS:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
2
    display: none !important;
3
}
4
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
5
    border-bottom-width: 0;
6
}

Перший селектор ховає контент першої вкладки. Другий прибирає нижню межу заголовка, без контенту вона виглядає як обрив. Розмістіть код у розділі «Додатково → Користувацький CSS» потрібного віджета (для конкретного акордеона) або в Appearance → Customize → Additional CSS (глобально).

Зверніть увагу: CSS не знімає клас elementor-active, а лише візуально приховує вміст. У DOM-дереві вкладка залишається «активною». На роботу сайту це не впливає, але якщо ви використовуєте кастомну аналітику на кліки по акордеону або сторонні скрипти, зав’язані на клас, поведінка може здивувати. Для більшості сценаріїв метод робочий і найлегший.

Якщо тема перевизначає стилі Elementor, підсильте специфічність:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content.elementor-active {
2
    display: none !important;
3
}

Не допомогло й це? Ймовірно, тема використовує власний JavaScript для примусового розкриття. Повертайтеся до Методу 1, JS-сніпет спрацьовує пізніше й перевизначає будь-яку поведінку теми.

Метод 4: аддони з нативним перемикачем

Частина аддонів для Elementor додають в Accordion опцію «Перша вкладка відкрита», один клік замість коду. Два перевірені варіанти:

The Plus Addons for Elementor. Розширює стандартний Accordion опцією Default Open Tab → None, усі вкладки закриті. Безплатної версії достатньо. Бонусом отримуєте вкладені акордеони, іконки з бібліотеки, шорткоди та шаблони Elementor всередині вкладок. Сторінка на WordPress.org.

Essential Addons for Elementor. Два мільйони активних установок. Accordion цього аддона теж стартує із закритими вкладками: опції Accordion State та Enable FAQ Schema прямо в налаштуваннях віджета. Якщо Essential Addons уже стоїть заради інших віджетів (Advanced Data Table, Filterable Gallery), додаткова установка не потрібна. Сторінка на WordPress.org.

Мінус очевидний: заради однієї опції тягнути плагін на 100+ віджетів, зайве. Але якщо аддон уже в збірці, ви отримуєте рішення в один клік.

⁉️🤔 Часті запитання

Чому Elementor не додає перемикач у стандартний Accordion?

Точної причини розробники не називають. Судячи з обговорень на GitHub-репозиторії Elementor, команда вважає поведінку «перша вкладка відкрита» правильною для accessibility. Запити на фічу висять із 2018 року. Пріоритет розробки зміщений у бік AI-функцій, контейнерів Flexbox і продуктивності. Поки перемикач не з’явився, голосуйте за issue на GitHub і користуйтеся сніпетом із Методу 1.

Скрипт не працює на мобільних. Що робити?

На телефонах і планшетах Elementor використовує ту саму розмітку, але рендеринг іде повільніше: слабший процесор, більше асинхронних запитів. Збільште затримку setTimeout до 500-1000 мс. Також допомагає перенесення сніпета у футер через хук wp_footer: скрипт виконується останнім, після всіх стилів і розмітки Elementor. На десктопі різниці немає, на мобільних помітно.

Чи можна використовувати jQuery-версію?

Так, але не радимо. З версії 3.0 Elementor перейшов на нативний JavaScript для фронтенду. Ванільний сніпет із Методу 1 важить близько 200 байт проти 87 КБ у jQuery (стиснений) і не залежить від підключення бібліотеки. Якщо тема або інші плагіни вже тягнуть jQuery: різниці немає. Але для сучасних тем на чистому JavaScript, таких як Hello Elementor, краще нативний варіант: менше залежностей, вища швидкість.

Метод із CSS не працює, перший пункт однаково видно.

Тема перевизначає стилі Elementor з вищим пріоритетом або використовує JS для примусового розкриття. CSS у цьому сценарії безсилий: скрипт теми спрацьовує пізніше й перевідкриває вкладку. Тільки JS-сніпет із Методу 1 вирішує конфлікт хронологічно: він виконується останнім і перехоплює управління.

Чи працює сніпет із кастомними темами та дочірніми темами?

Так. Сніпет оперує класами самого Elementor: .elementor-accordion-item, .elementor-tab-title і .elementor-tab-content. Вони не залежать від теми. Ми перевіряли на Hello Elementor, Astra, GeneratePress і Kadence: скрізь відпрацьовує однаково. Виняток: теми, що повністю замінюють розмітку Elementor-віджетів через фільтри (трапляється рідко, здебільшого в преміум-збірках типу Avada).

Акордеон чи Toggle: що обрати

Toggle вирішує проблему без коду, але дає користувачеві розкрити одразу кілька секцій. Для FAQ-сторінки або довідкового розділу це навіть плюс, відвідувач бачить усі відповіді одночасно. Toggle нативний, швидкий і не потребує підтримки сніпета під час оновлень Elementor.

Якщо логіка «один відкритий, решта закриті» принципова, беріть Accordion і JavaScript із Методу 1. Сніпет із чотирьох рядків працює стабільно, не залежить від версії Elementor і закриває питання повністю.

Почніть із найпростішого: відкрийте редактор, замініть Accordion на Toggle та перевірте, чи влаштовує поведінка. Ні, повертайтеся до сніпета. П’ять хвилин, і акордеон виглядає так, як ви задумали.