Stop Elementor's Accordion Opening on the 1st Tab
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2021
- This is a common issue where the Accordion in Elementor always opens on the 1st Tab. It can be annoying when you don't want that or you have multiple accordion's on the same page.
Use this code in the Custom CSS (of the Advanced Tab of the Accordion) to prevent it. Note that you need to have a fake tab as the very first one.
The Code is below in the Comments.
PS: websquadron.co.uk
PPS: Don't miss out on our amazing Create a Website in One Weekend Course - and it comes with a FREE Elementor Pro License!! websquadron.co.uk/createwebsi...
PPPS: Contact us for any questions or to collaborate.
PPPPS: I must stress that we only build with Elementor and no other Page Builder. - แนวปฏิบัติและการใช้ชีวิต
Make sure that you put 'accord' in the CSS Class Name.
.accord .elementor-accordion > div:first-of-type { display:none;}
/*The bit below adds the top border back in*/
.accord .elementor-accordion {
border-top-style: solid;
border-top-width: 1px;
border-top-color: #ff0000;
}
"Make sure that you put 'accord' in the CSS Class Name."
Is that class ID or is it CSS classes (in the advanced tab)?
Here's the CSS that you'll need:
.elementor-accordion > div:first-of-type { display:none;}
@Blue Room IT Not that I am aware of, but I'll check for any 'n' variable that allows that.
Thank you!
OMG. I thought I was the only one having this issue! You are a lifesaver my friend. Thank you!!!!!
Wow, it seams that whatever I need for customizing Elementor you have a great solution for that. Thanks again Web Squadron for being so helpful
I just recently built 3 pages with this exact issue. Great fix.....thanks alot. It was a real problem. Ill execute this in the morning.
Dead simple! Thank you for this great workaround. This is now in my list of "Super Awesome Code Snippets!"
I'd love to see your entire list of Super Awesome Code Snippets! Please do share: info@websquaron.co.uk :)
Just used this on my site. Worked like a charm. Thank you!
Yes!!!!
Thanks for your tutorial! I was trying the javascript approach shown in other tutorials but it didn't work. Yours works like a charm! Keep up with your great work :) Liked and subscribed
Glad it helped!
Brilliant this solution to an already very old problem!
Just a little more information:
in case of responsive design (computer, tablet and mobile) with duplication of the accordion widget and use of the advanced "Responsive" function, the pseudo-element (to be hidden) of the first accordion must be present for each of the designs otherwise you will hide the first useful element for the screen where there is none.
CSS code, on the other hand, can be implemented in one place.
Great point :)
a simple and practical solution 😎THX bro
Thanks so much Imran another life saver
Thanks for pointing out the solution. It's strange that they have not corrected this yet. It has been literally years. I'd also add as a possible option that the presented code could have the Elementor 'selector' at the start so it only applies it to that accordion instance otherwise the code will apply to every accordion sitewide. Oh and I did a different type of child element call.
selector .elementor-accordion-item:first-of-type {
display: none;
}
Thanks again 👍
Thank you so much! This is a great tutorial.
Thanks Imran, save me tons of time!
Thank you for this.
I found tons of videos online with similar solution but nothing worked. This actually worked like a charm. Thank you Imran. I don't understand why Elementor does not add this option to the widget.
Agreed
A big thank you for posting this helpful video!
This is beyond helpful thank you for the tutorial! Although I did have a question; If I was to change the Title HTML Tag on the accordion to a h2, it looks like even the "fake" tab is able to be seen by SEO tools (I'm using SEO minion Chrome extension to check on page) do you know of a way to combat this?
Awesome solution
that is so genius. Thank you
this was such a bloody annoying feature of this widget. you r a legend dude!
I hope they make it a default setting on the accordion in the future.
Thank you bro, you are a lifesaver
thank you so much
No problem
Finally one that actually works!
Excellent :)
Thank you
Wauw thank you so much!
You're welcome!
Wow, nice HelpFull ❣️❣️
Thanks 🤗
thank youuuu! super useful!! 🤩
You're welcome!!
Thank you so much my issue is sortout. Can you please share me perfect small size booking form plugin with country list as I need to add short code in accordion section. As customers open accordion they will get Booking form
See this to help your Form: th-cam.com/video/H2sBzUTL564/w-d-xo.html
Thank you so much
I want to share a website with you so can you please share your email address.
very clever mate!
Makes a big difference right :)
you legend, thank you
Thanks :)
No problem!
But I have a problem now. A client maintained a blog type of narrations for the past 12 years. I have created all 12 years of the records and put them in template, then I called them using the Accordion method as shown. But it took more than 30s sometimes even up to a minute plus to load the page. Accordion was loading the data in the templates apparently, so than when the title is click, the data will be displayed instantaneously.
The "blog" type of narrations consists of one or more images, below 150k each and the narrations are below 250 words.
I wonder if there are any better ways to handle the case. I was hoping the timeline could be displayed on the same page but with faster preloading time.
As always, appreciate your help.
I know what you mean about too much content slowing things down. Are the images Webp to make them smaller? Would be better to just use Posts and have a Post Filter.
@@websquadron thanks for the reply. I would say the images were pretty well compressed, less than 150KB, good enough to strike a balance btw. quality and file size. There were 12 years of narrations, average about 1-2 posts a month, that would be like almost 300 posts. Using HTML, he was able to put all of them in just 1 page and it loads well. (he took down the site though).
The thing is when migrating to WP, he still wants to load all of them in one page, and
Client is reluctant to use "another" plugin just for a single page/job. * sigh
@@stevechong65 Are the images WebP?
@@websquadron they are jpegs
@@websquadron I may have found the solution, instead of using Accordion, I would use links and call the popups respectively, that way I could still keep the user on the same page. However, the scroll effects might not work, *sigh
How to make opened by default specific tab? F.e. the second one?
I would rearrange them to be honest and make Number 2 be Number 1
we can do this with javascript without using your css right?
Indeed, yes you can.
If you insert some HTML Code - this would do it.
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
PS - I'm not a massive HTML/CSS Coder.
PPS - SQL Programming on the other-hand - I consider myself a powerhouse (but that's a different story)
PPPS - I find many prefer simpler codes like the CSS one above but all answers are good.
PPPPS - Thanks for reminding me to put the Javascript in
PPPPPS - do paste in any other codes or methods that you think are useful for people - because it's all good.
Take care :)
Genio!
Thanku so much
Any time
This will help you more: th-cam.com/video/ycnDfUG1ZbI/w-d-xo.html
It's not working. I added the CSS Class Name and the code in the Advanced section where it says "Custom CSS" but the first is still showing and opening.
Use the new accordion widget that prevents this now
If an accordion with this css code is interpreted by Google's search engine as a FAQ Schema, does the fake element appear in the search results as well?
Only if you set that FAQ to be marked up as FAQ Schema.
rankmath.com/kb/faq-schema-elementor/
And I would apply caution. There are other solutions that you could also use to keep the first tab closed. Go with what you're most comfortable with.
What I will also add - is that you could add a reasonable Query in Tab 1 - which isn't vital to be shown, but if Google makes it visible on their search results, then it's fine too.
Eg: The First Tab could be "Are these FAQ Updated Regularly?"
Answer: "We update and share the most frequent questions and review on an ongoing basis".
Etc. Job done.
@@websquadron Great idea! Sounds better
@@techdelasabana Ace :)
Problem is that you lose the top border of the accordion if you hide the first block. Any fix to that?
Interesting as I don't get that problem.
Have you a URL to share?
@@websquadron you are getting it on your video - if you notice the accordion is missing the top border line on the "2nd" item when you hide the first. You can see exactly the problem in your video. :) If you go to 6:09 in the video and look at your top accordion you will see that the top border line on your now first item is missing the line.
@@one9seven675 Ah yes, I forgot about that. Here's the code you need!
Add this after the other CSS.
Change the colour to your preference.
Make sure that you put accord in the CSS Class Name.
.accord .elementor-accordion > div:first-of-type { display:none;}
.accord .elementor-element .elementor-widget-container {
border-top-style: solid;
border-top-width: 1px;
border-top-color: #e0e0e0;
}
@@websquadron did you actually mean this:
.elementor-accordion > div:first-of-type {display:none;}
.elementor-widget-accordion .elementor-element .elementor-widget-container {border-top-style: solid;border-top-width: 1px;border-top-color: #e0e0e0;}
?
@@one9seven675 I found my code worked better. Note that I have added .accord as a Class Name for the Accordion into the code.
If your code works, then do go for it :)
Hi
I experience two issues with this method.
#1 The top border of my accordions disappears when I insert the code.
#2 I have a total of three accordions on a page but only two of my accordions work. The last one just vanishes.
Do you have any ideas on how to solve the problem?
Best regards
Rasmus
Make sure the last one has at least more than 1 tab content.
See this for the border: th-cam.com/video/ycnDfUG1ZbI/w-d-xo.html
@@websquadron I appreciate your time. This solved half of my problem, thanks, buddy. The last part where the top border is missing is getting to me. Asked you about it on your live stream and you told me to check the CSS class, which is "accord" due to the fact that I've stopped the accordion to open on the 1st tab through the CSS you show us in this video.
I wish you a lovely Tuesday afternoon!
@@rasmusriis3954 What about the other style settings for the accordion? You may need to drop that to 0 in the style tab.
bro can you help me i i tried the css but top border is missing and also the content is missing how to fix this ?
Use this code instead:
.accord .elementor-accordion > div:first-of-type { display:none;}
.accord .elementor-accordion {
border-top-style: solid;
border-top-width: 1px;
border-top-color: #ff0000;
}
@@websquadron I used this code, but it made the fake tab appear.
@@cybercrazy15 Are you sure, as it's always worked for me and many others? How are you adding the code, and are you using any class names - or do you have any other CSS code applied elsewhere?
We do go over the difference between an Accordion and the Toggle too.
Thks 1k times. I suppose the issue for 'toggle widget' to close all others when opening one would need a solution. How would you make it so just hover would open the section and NOT having to click ?
@@elisha770 Needs some JS that I don't have yet
@@websquadron thks 👍🏻😎
WEB SQUADRON! Plz HELP........ How to force 1st toggle to close by itself when we click on the other toggle?
You should use Accordions rather than Toggle for that
@@websquadron oky....👍
hello can you solve me the problem what tha problim tabs open and dont close plese solve me
Are you adding accord to the class name - and then adding the code?
@@websquadron Yes but when I added it it was opening and closing but when I open it again it does not open Can you help me
@@asemabualawer May need 1-2-1 site access but we charge for that. Sorry.
@@websquadron thanks for help me❤️❤️🌹🌹🌹
This code hide that accordion on which applies. The solution I found that keep first accordion blank and apply this code on that.
I've never had that problem with the code.
mate this is genius but why did you not say at the beginning that we need elementor pro for this to work. i was well excited.
Oh dear - I will now make sure that I let you know from the start :)
May Allah Bless you
You mentioned there is a solution for the free version?
Have you added the Code to your Advanced CSS for your Theme.
Go to your Accordion and give it a Class Name of Accordstop.
Then add this at the start of the code; .Accordstop (notice the full stop at the start).
@@websquadron Thanks for the quick reply, I found where to add the class name in elementor, but where would I find the Advanced CSS for my theme?
@@theglobalmerchant27 Go to Wordpress > Then Appearance > Then Themes > Then Customise > Then Advanced CSS
@@websquadron Cool beans thanks, mine says Custom CSS, but I am sure its the right place, now I cant find your code in the comments? sorry
@@theglobalmerchant27 .accord .elementor-accordion > div:first-of-type { display:none;}
/*The bit below adds the top border back in*/
.accord .elementor-accordion {
border-top-style: solid;
border-top-width: 1px;
border-top-color: #ff0000;
}
where is code i didn't see it
It was in the comments:
Make sure that you put 'accord' in the CSS Class Name.
.accord .elementor-accordion > div:first-of-type { display:none;}
/*The bit below adds the top border back in*/
.accord .elementor-accordion {
border-top-style: solid;
border-top-width: 1px;
border-top-color: #ff0000;
}
Followed all the steps (in Elementor pro). Didn't work. Checked the video 10 times. Still didn't work.
Hi
Which steps do you mean?
@@websquadron all the steps mentioned in your video
Hmmmmm.... Are you adding a copy of the first tab to the accordion - and then dumping the CSS Code in? Email us on info@websquadron.co.uk if you're happy with us having a look at your wp-admin site.
@@websquadron Yes, maybe there is something going on...
That would be great! I will e-mail you tomorrow. Thanks.
@@ilyjax Great. Once we can get in, we'll check.
What about tabs master ? :)
Not got code for tabs yet
Thanks for this awesome video. It worked perfectly.
You can also add the following HTML code 'above' the accordion text box, not in it:
body:not(.elementor-editor-active) .elementor-widget-accordion .elementor-tab-content {
display: none!important;
}
window.addEventListener('load', function() {
setTimeout(function(){
document.querySelector('.accordion-closed-on-load').remove();
let accordionsElems = document.querySelectorAll('.elementor-widget-accordion')
accordionsElems.forEach(e => {
let activeTitle = e.querySelector('.elementor-tab-title.elementor-active');
let activeContent = e.querySelector('.elementor-tab-content.elementor-active')
jQuery(activeContent).hide();
activeTitle.classList.remove('elementor-active');
activeContent.classList.remove('elementor-active');
activeContent.setAttribute('hidden','hidden');
activeTitle.setAttribute('aria-expanded',false);
activeTitle.setAttribute('aria-selected',false);
activeTitle.setAttribute('tabindex',-1);
});
},100);
});