Elementor аккордеон сделать закрытым по умолчанию

Как закрыть любую секцию в Elementor по клику

Вы сделали секцию в пейдж-билдере, которую хотите закрывать кликом по кнопке, иконке, тексту, и так далее.

Вы можете использовать этот способ для любого пейдж-билдера, я буду использовать Elementor.

В этой статье вы узнаете, как закрывать любую секцию в Элементоре по клику на кнопку или любому другому элементу.

1. Добавьте class секции
2. Добавьте class закрывающему элементу
3. Вставьте код в виджет HTML-код

1. Добавьте class секции

Зайдите в Расширенные — CSS классы, добавьте closeclick.

2. Дайте class закрывающему элементу

Добавьте кнопку или иконку, и дайте ей класс clicktoclose.

Кроме кнопки и иконки вы можете использовать текст, картинку, заголовок или любой другой элемент.

Убедитесь, что в поле для ссылки ничего нет:

3. Вставьте код в виджет HTML-код

Добавьте виджет HTML-код:

Вставьте этот код:

Если вы хотите, чтобы секция была липкой (sticky), и находилась наверху страницы, используйте этот код:

Все готово, проверяйте.

Читайте также:

Надеюсь, статья была полезна. Оставляйте комментарии.

Источник

Elementor Accordion closed by default

Share This Post

Elementor is now called the # 1-page builder ( at the time I am writing this blog ). Surely it gives you features that will help you create a beautiful and professional website in matters of hours but there are certain things that users would like changed at some point. For example the Accordion widget!
I see people asking for a way to make the Accordion widget closed by default ( on Github, on support, on Facebook ).

So here are few solutions that might work for you if you are one of the ones who wants the Accordion closed.

Remember my method is without the need of using any plugin 🙂

Method 1: You can use Toggle Widget which is closed by default.

Method 2: If you insist on using Accordion Widget follow my video:

The code you need to insert:

I hope this helps you guys!

Again my method is without any plugins. If you are not comfortable with inserting code I suggest you look for some 3rd party plugin that can do this for you. Follow our blog for more tips and tricks on Elementor. If you are looking for some amazing Themes, Plugins check our list of Products

Источник

WordPress.org

Русский

Аккордеон в Elementor

Здравствуйте! Столкнулся с небольшой проблемой. Подскажите, как решить?
Собрал в элементоре лендинг. В середине ленда использовал «аккордеон». При открытии сайта первый заголовок аккордеона всегда открыт и если ленд скролить дальше (т.е. пролистать весь текст этого заголовка до конца), то всё нормально. НО! Если этот первый заголовок сразу свернуть, не долистывая до конца текста и скролить дальше, то ниже перестаёт отображаться часть элементов — некоторые изображения, кнопки и заголовки. Если долистать сайт до конца и потом возвращаться вверх, то эти элементы появляются. Но при первом просмотре — нет. Это как-то связано с количеством текста. Если текста мало (меньше экрана), то всё хорошо, а если его больше, чем на один экран, то возникает такая ситуация.
В чём может быть проблема? Куда копать, подскажите, плиз.

• Тема изменена 11 месяцев, 1 неделя назад пользователем politeperson .
• Тема изменена 11 месяцев, 1 неделя назад пользователем politeperson .
• Тема изменена 11 месяцев, 1 неделя назад пользователем politeperson .

politeperson, привет.

А ссылку можете указать проблемной страницы?

На форуме поддержки элементор написали? Можете еще посмотреть другой билдер, например такой https://ru.wordpress.org/plugins/page-builder-add/

@vladvector , привет!
Я её ещё не опубликовывал, она на техническом домене, работаю над ней.

@alexander70
На форуме не писал. Если не сложно поделитесь ссылкой, пожалуйста.

Источник

Accordion Widget

The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content.

With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.

A similar widget is the Toggle widget, but there are two main differences between the Accordion widget and the Toggle widget.

1. When a page is loaded, the first item of the Accordion widget is expanded, while all other items remain collapsed. With the Toggle widget, however, all items are collapsed when a page is first loaded.
2. Only one item of an Accordion can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion. With the Toggle widget, however, as many items as desired can be expanded at the same time.

Content

Accordion

1. Accordion Items Title & Content: Enter the title and description for each item
2. Icon: Select the icon to represent the action of expanding an item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the expanding concept.
3. Active Icon: Select the icon to represent the action of collapsing the active item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the collapsing concept.
4. Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV
5. Add Item: Use the ‘Add Item’ button to add more accordion items to the list.

Style

Accordion

1. Border Width: Set the thickness of the border around the accordion and between each item
2. Border Color: Choose the color of the border around the accordion and between each item

Title

1. Background: Choose the color of the title’s background
2. Color: Choose the color of the non-active titles’ text
3. Active Color: Choose the color of the active title’s text
4. Typography: Set the typography options for the titles
5. Padding: Set the padding for the titles

1. Alignment: Align the icon to the left or right of the title
2. Color: Choose the color of the icons
3. Active Color: Choose the color of the active icon
4. Spacing: Control the spacing between the icon and the title

Content

1. Background: Choose the background color of the content
2. Color: Choose the text color of the content
3. Typography: Set the typography options for the content
4. Padding: Set the padding for the content

Advanced

Set the Advanced options that are applicable to this widget

Источник

Accordion — setting for all closed at start #2481

Comments

ghost commented Sep 25, 2017

Description

When Accordion is first displayed at page load, the first element is always open — would like a setting so all can be closed when page loads.

arielk commented (and closed the issue) «For this option please use Toggle widget instead of Accordion»

Unfortunately, Toggle doesn’t work the same as Accordion . elements have to be closed manually. In Accordion, there is only ever one open at a time — which is the behavior I want — so Toggle isn’t a substitute.

Where there is a longish list (e.g. and FAQ), it’s better for the visitor to see all the list headings before chosing . it doesn’t make sense to have the first item open, as it probably isn’t appropriate to the visitor.

Steps to reproduce

Environment

The text was updated successfully, but these errors were encountered:

Basilakis commented Sep 25, 2017

on how to make it happen.

ghost commented Sep 25, 2017

Hi Basilakis
I looked at the link, and I’m none the wiser. I know nothing of JS (except that it is JavaScript), and I’ve never been able to master coding in any langauge . in part why I use WordPress and Plugins. I can change settings, but not add or change code.
I looked at the Elementor Accordion on a test page using Chrome’s ‘Inspect’, but couldn’t see what was different between open and closed elements.
But thanks for making the suggestion.

nicktereh commented Oct 7, 2017

Please use the Toggle widget instead of the Accordion, It’s a similar widget but all items closed by default

enviedbymost commented Oct 19, 2017

+1 for this feature request.

Odd it’s not closed by default. Kinda defeats the purpose of an accordion.

userabuser commented Nov 3, 2017 •

In the mean time you can apply the following fix (extract into your own code/architecture if required)

It would be more ideal to have this configurable from within the widget however.

ghost commented Nov 3, 2017

Thanks for the code snippet . but I don’t do code/programming (have never mastered it) . which is why I use plugins like Elementor.

Agree with enviedbymost’s comment . other Accordions I’ve used have been closed to start with.

bainternet commented Nov 5, 2017

Should be added and default from version 1.8 and up.

If not please feel free to reopen this.

casperroux commented Nov 9, 2017

@bainternet
Can you please confirm if this is now possible, as I am using v1.8 and I don’t see any option for this

philrp commented Nov 9, 2017

Same here. Updated to 1.8.1 and don’t see an option for all closed at start.

And now neither the code above or the one I was using as a workaround work.

jaessi commented Nov 10, 2017 •

One way to solve this would be to create an empty accordion item as the first item, then remove it.

bainternet commented Nov 13, 2017

In 1.8 we fixed the issue we had with the toggle, which is now closed by default.

Dave-LeDev commented Nov 20, 2017

This still seems to be an issue with 1.8.5 free; the first element auto-opens and I’m not finding a setting to toggle this feature.

aymeric-wisepass commented Nov 21, 2017

I am facing the same issue.
@bainternet The toggle function is not the same as the accordion (requires user to manually close each item) therefore there is still a need for a feature to have the 1st item of each accordion closed by default.

PouncingFox commented Jan 2, 2018

Yeah not seeing a fix in 1.8.x but here’s some code you should be able to copy/paste without modding. The delay is there so that it executes after the accordion code:

torndownunit commented Jan 15, 2018

I can’t believe this is still an issue. Why would an accordion even be open by default? Thanks for the fixes provided.

kkaii commented Feb 26, 2018 •

I’m apologizing for my ignorance but where can I insert this code as I am working on the back end in WordPress. I utilized code snippets plugin before but really I do not know where to inject this code properly. Thank you for your indulgence.
. and instead of utilizing the accordion widget I simply go for the toggle widget instead it is closed by default. Elementor v 1.9.6

Ammikas commented Apr 5, 2018

Any update on this issue?

PS I’m also a newbie and don’t know how should I use the code. There is a place for custom CSS in WordPress but there it doesn’t work.

Any help is appreciated.

ghost commented Apr 6, 2018

I’ve started a new issue #4015 as one this has been closed (and I think it’s been forgotten)

osmanpro commented Apr 15, 2018 •

finally i found the fix
go to your wordpree control panel >>> PLUGINS >>>> NEW PLUGIN >>> SEARCH FOR Code Snippets >> INSTALL IT >> ACTIVATE IT >> go to this plugin in the left bar called SNIPPETS >> ADD NEW SNIPPETS >> PASTE THIS CODE ON IT

> Run snippet everywhere > SAVE CHANGES AND ACTIVATE NOW TRY THE ACCORDION YOU WILL FIND IT CLOSED !!

Tomgalpo commented Apr 19, 2018

Thanks for the code,
I did what you said, but it writing me an error

The code snippet you are trying to save produced a fatal error on line 7:

syntax error, unexpected end of file

TeslaKudryavtsev commented May 7, 2018

@Tomgalpo
These code have an error, please copy this code. Enjoy!

textfriseur commented May 23, 2018

Hello,
experiencing the same problem.
The code still seems to produce an error in line 7 (last line).
I am no expert in coding. But to me it seems, like the function braces in line one «<" never gets closed. (Also the "?>» looks incomplete to me.) I tried closing the function by adding «>» in line 8, but that produces an error in line 8.

ghost commented May 23, 2018

Still no proper resolution to this, it seems.
Can’t understand why the Elementor Team have been so reluctant to fix this.

textfriseur commented May 23, 2018 •

I have found a workarround:
Add a HTML code element to the page and paste this code:

It will close the first element after loading the page. It’s ugly but it works.
source: https://voidcoders.com/elementor-accordion-closed-by-default/

bentalgad commented Jul 25, 2018

bentalgad commented Jul 25, 2018

bentalgad commented Jul 25, 2018

Btw — Same thing with the «Toggle Widget»

MorganSkarin commented Jun 12, 2019

Guys, why don’t you just install and use the accodions from Essential Addons (free version)? 😄

Royal-lobster commented Jun 21, 2019 •

Here is the final fix to this problem

A workaround I’ve seen is to leave the first item blank (or put anything in it, doesn’t matter what) and then use this CSS to hide it:

/* Hides the first accordion item */ .elementor-accordion .elementor-accordion-item:first-child

This must fix the issue.

dougm1966 commented Jun 21, 2019

Why do I keep getting notifications for this thread when I’ve unsubscribed from it?

bkno commented Jun 24, 2019 •

Elementor please add this to the built-in accordion options.

For the record, textfriseur’s JS solution worked well.

webersonloureiro commented Sep 13, 2019 •

This is the final solution we developed here:

spac-em commented Nov 27, 2019

I feel very disgusted by this act by the developer and the team. the have just ignored all the request to the paying customer, its time to move to Brizzy since they have app-sumo lifetime plan.
not only this I’ve seen many issues brought up they just ignore.

Jenn0014 commented Dec 5, 2019

The Granular Control @RoyeA mentions is a Plugin https://wordpress.org/plugins/granular-controls-for-elementor/ after adding this I was able to switch accordion items to be closed on the entrance.

A very easy fix, but should be in Elementor options not an additional plugin.

vvvamik commented Jan 9, 2020 •

Simply the best solution!

thallysondiasdmc commented Jan 9, 2020

vgstef commented Jan 15, 2020

I have the latest Elementor (Pro) version, and I’m facing this issue. Any updates from the developers?

jongoodey commented Feb 3, 2020 •

I know it may be a slightly hacky way but I added custom css:

and then duplicated the first item on the list, the great thing with this is if you have multiple accordions on the page or site you only need to do this once.

TheoKoenig commented Feb 16, 2020

I can’t believe this feature is not available. +1 for making it happen.

jessetuttle commented May 1, 2020 •

FIX WITHOUT INSTALLING ANY OTHER PLUGINS, NO CODING OF FILES, NO NEED TO HIDE FIRST-CHILD.

As I would like to see this added as a setting, one of many settings I would like to see added. It is pretty easy to fix.

Use the HTML Elementor Block, then inside the block put the following code.

Want this effect across your entire site? Place it in your header or footer.

Edit: I went to cite a source for this but I’ve found this solution provided by many sites.

advivesolutions commented May 5, 2020 •

You can install any headers & footers plugin to add this code.

ajn2199 commented May 14, 2020

In case anyone is still interested, there is a much simpler CSS only work around here. The idea was inspired by @jaessi.

Add an extra item at the top of the accordion, then under the accordion’s Advanced / Custom CSS enter this:

selector .elementor-accordion-item:first-child <
display: none;
>

That turns of display of the first, open, accordion item, leaving only the closed ones visible.

TheoKoenig commented May 14, 2020

In case anyone is still interested, there is a much simpler CSS only work around here. The idea was inspired by @jaessi.

Add an extra item at the top of the accordion, then under the accordion’s Advanced / Custom CSS enter this:

selector .elementor-accordion-item:first-child <
display: none;
>

That turns of display of the first, open, accordion item, leaving only the closed ones visible.

This is what I ended up using. Good solution, except when it’s time to explain to the site editor why he has to leave an empty item at the top of the list :/

userabuser commented May 14, 2020

Good solution, except when it’s time to explain to the site editor why he has to leave an empty item at the top of the list :/

I wonder if it’s possible to inject an item at the top of the list programmatically via a hook to remove the burden/technical implementation-debt from the author?

Been a while since I looked at it but may be worth looking into the module.

jessetuttle commented May 14, 2020

In case anyone is still interested, there is a much simpler CSS only work around here. The idea was inspired by @jaessi.

Add an extra item at the top of the accordion, then under the accordion’s Advanced / Custom CSS enter this:

selector .elementor-accordion-item:first-child <
display: none;
>

That turns of display of the first, open, accordion item, leaving only the closed ones visible.

In case anyone is still interested, there is a much simpler CSS only work around here. The idea was inspired by @jaessi.
Add an extra item at the top of the accordion, then under the accordion’s Advanced / Custom CSS enter this:
selector .elementor-accordion-item:first-child <
display: none;
>
That turns of display of the first, open, accordion item, leaving only the closed ones visible.

This is what I ended up using. Good solution, except when it’s time to explain to the site editor why he has to leave an empty item at the top of the list :/

Good solution, except when it’s time to explain to the site editor why he has to leave an empty item at the top of the list :/

I wonder if it’s possible to inject an item at the top of the list programmatically via a hook to remove the burden/technical implementation-debt from the author?

Been a while since I looked at it but may be worth looking into the module.

A good solution was provided without the need of leaving the first line empty.

Источник