Вы добавили аккордеон в 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 и проверьте, устраивает ли поведение. Нет, возвращайтесь к сниппету. Пять минут, и аккордеон выглядит так, как вы задумали.