Wow! This was so helpful. I wanted a way to prevent an employee bio from being a mile long on mobile, and this is it. I just duplicated the text widget, dragged it into the accordion with your instructions, and changed the responsiveness. I was very proud of myself. I have only been playing with Elementor for a year or so, and only a couple hours a week really. I own a law firm SEO agency, and I could send a two-sentence text to my developer, but what fun would that be? Makes the admin less grueling. ***Quick question: I added the CSS to the widget itself and not to the site settings. What is the drawback to this? I assume there must be one, or you would have done that. Thanks a million!
Good job, I'm glad this helped! Pros and cons which come to mind with putting the CSS on the widget itself: Pro(s): - The CSS only loads where it is need instead of on all pages Con(s): - If you have more than one widget on pages, you don't really want to be duplicating the CSS over and over - CSS pasted on widgets can be confusing for other developers to find vs. committing to centralize all styling in one predictable place. We like to use WP Code to manage modular snippets: wpcode.com/
I had to update the snippet to account for Elementor changes. The updated snippet should work if you have containers and nested elements enabled. Let me know if this doesn't work and I'll doublecheck the snippet. Thanks!
Okay so if anyone can be helped with this - 1) If you have container enabled and nested elements in elementor settings then this code will work (also will get option to add widgets or other elementor elements like in the video) - .text-expander .e-n-accordion-item span.read-less { display: none; } .text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-more { display: none; } .text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-less { display: inline; } 2) If the above one does not work then it means container and nested elements are not turned on so this will work - selector .elementor-accordion-item .read-less { display: none; } selector .elementor-active .elementor-accordion-title .read-more { display: none; } selector .elementor-active .elementor-accordion-title .read-less { display: inline; } Thank you for your time :)
Hi, just saw this. There is a link to get the latest snippet in the description and others have posted versions of snippets in comments. Please let us know if you have any trouble getting it working.
For the Accordion > Advanced > Custom CSS, this also works: selector .read-less { display: none; } selector .e-normal[open] .read-more { display: none; } selector .e-normal[open] .read-less { display: inline; } i have used this and it works fine@@theresasouthern8631
@@theresasouthern8631 Elementor has changed a class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix.
@@BrunoBrozovic @muniboubari5628 figured out "after latest elementor update .e-normal[open] should be replaced with .elementor-tab-title.elementor-active" I did that and it worked. However, my default state on the website is the full visible text. Not sure now if I'm supposed to add the script @kinggrizzly mentions or where. Hmm, sorry @kingGrizzly, no good deed goes unpunished I guess 🙂
Hi! Even after updating Elementor I dont have the Accordeon like you. It doens´t have that many options and the content definetely doesn behave like a container. How can I get it? ...
Are you on Pro? I'm trying to remember if this is a Pro feature. Also, Elementor now has the ability to turn widgets on and off under the "Elementor > Element Manager" from the main Wordpress menu. Maybe see if some of the widgets are turned off?
@@KingGrizzly yes yes, Elementor Pro, all updated. The thing is that I do have Acordeon widget but it doesn´t have that many options like in your video. Is it possible that since I´m from the Czech republic I might have different version of Elementor??.... thanks!
@@TINYbeatboxer I wouldn't think the Czech version would be any different. Are you a member of the Elementor Facebook group ( facebook.com/groups/Elementors )? If you put a screenshot in there, people might be able to give you a good answer. The other idea would be to go to Elementor > Features and try turning on Nested elements. Maybe this will change what the accordion is capable of?
For me the read-more and read-less classes show up on the backend elementor and it all works, but when loading the frontend of the site it does not work because the classes don't exist. It seems to load everything from the Read MoreLess except the class='read-more' and read-less. It loads the spans and More/Less content, but not the classes. Weirdly also the parent element class of the p element is not loaded either.
Any chance an optimizer plugin could be stripping those? Are they still there if you exit editing the page but then load it up again? Or do the classes gets stripped out in the editor too?
Please help I need customize the behavior of the “Read More” button so that it opens the additional content upwards, placing the button to minimize at the bottom of the expanded area. This way, the button isn’t positioned between the two sets of information, which makes for a cleaner and more user-friendly layout
This would be a nicer user experience, I agree. The Elementor accordion doesn't seem to have the option to open upwards. I tried to override it with some CSS/JS briefly and had limited success. Are you simply expanding text? If so, it's probably easier to dynamically shorten a large block of text using some javascript and a "Read More" toggle. If you are hoping to incorporate rich content, like an Elementor layout, then it will be necessary to come up with CSS/JS to override the widget, make a custom widget, or use an add on. If I figure out how to do it, I'll make a video! Let me know if you solve it too.
Are you running any performance optimizations plugins or tools such as WP Rocket, Flying Scripts, Siteground Optimizer, etc.? If so, they could be causing your animation to fail. Quick test would be to turn off the plugin to see if the problem goes away. If it does go away, then the plugin settings would need to be adjusted to allow Elementor animations. Let us know what you find out.
Has anyone else run into the issue of having the accordion automatically open rather than just showing "Read More" on the load? Any ideas on how to fix that?
@@maryseibert5000 I'm using the accordion widget and the control is under the Content > Interactions tab. If you don't see this, you may be using the old accordion widget. I believe you may need to go to your Elementor > Settings and then enable containers as well as nested content. Be forewarned, this may force you to stop using sections and start using containers which are a much different paradigm. Could be wrong, but I think something along these lines may be required to get the latest accordion widget enabled.
Thanks a lot. One issue: I have two accordeons on one page. I can only open the second (lowest) accordeon if the first one is opened. What do I have to change?
I'm not certain I'm understanding you. The original CSS seems to work with multiple toggle widgets on the same page with no issue. Are you creating multiple "Read More" toggles with one widget? I think you should only do one instance per widget. So, duplicate one widget with a single toggle versus adding two toggles to one widget.
You might be able to write some CSS or JS to change the position of the "Read Less" text when the toggle is open. I haven't tried this, but it's a good idea.
Almost got it! ... I copied the code(s) directly and My "Read More" looks normal in the backend, but it the front end it reads "Read MoreLess"... I have tried and tried to fiddle with it, but I can't seem to get it... Anyone have a solution for this? Thx!
Elementor has changed a class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix.
Great tutorial, but there is no chance for me to drop in a video like you did it. I would like to hide a whole container and make it visible with a "read more..." function.
If you go to Elementor > Settings > Features and make sure Flexbox Container and Nested Elements are turned on, then I think you should be able to put whatever you want in an accordion using the latest version of the widget.
Your Elementor Pro GUI left side menu has more options than my own. I have latest plugin version installed? I don't seem to be able to get the Accordion > Advanced > Custom CSS to work?
Hmmm, I think there may be an updated UI with icons across the top now. I see an experimental feature which can be turned on an off: Elementor > Features: "Editor Top Bar". elementor.com/help/elementor-top-bar/. Could the custom CSS be up there now?
Thank you for replying. I believe I now have the latest version installed and have the new features enabled. But I still cannot get the code to work. Also when I paste the code snippet into 'Custom Code' I see a warning which Seays 'Don't use adding classes. Element (Span.read-more) is overqualified, just use .read-more without element name. Could there be something I need to enable in Elementor settings? Would you be happy to share your settings in case this has any difference. Thanks I appreciate you sharing and responding..@@KingGrizzly
I take it back! Its still not working?? Having the same result as @LScustomfloors. Works on back end but on front end I'm seeing 'ReadMoreLess' in closed state and "Read Less" in open state.
@@alexorrow Figured it out. Elementor has changed a class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix. Now... to go figure out where I need to update CSS.
When I copy and paste your CSS code, it gives an alert message: Don't use adjoining classes. Element (span.read-more) is overqualified, just use .read-more without element name. And some words in my CSS code are presented in red font colour (the words: span and open). Any idea what I might be doing wrong?
Hi Thomas. Sometimes the code syntax highlighting isn't actually a problem, just a recommendation. Does the code fail to work for you? If it works, you probably don't need to worry about it. If it fails to work, something is wrong.
@@thomasschuurmans4838 Hard to say without taking a look.Did you hand type the snippet? I know we had kind of an annoying "opt in" to get the snippet, but the latest should work. Otherwise, if you want me to take a look, feel free to email brian@(ourbrandname).com and I can take a look!
@KingGrizzly my colleague got it to work. This works. He noticed that the snippet does not take into account recent elementor updates. Also we had not activated the flexbox container for elementor. Snippet that works: selector .elementor-accordion-item .read-less { display: none; } selector .elementor-active .elementor-accordion-title .read-more { display: none; } selector .elementor-active .elementor-accordion-title .read-less { display: inline; }
@@thomasschuurmans4838 Thanks for sharing. This is interesting because I've got an up to date site with the accordion running and the classes are like the ones in my snippet. I don't see the .elementor-accordion-title class in the HTML markup anywhere. So I'm wondering if your colleague added that class or if some variation in our Elementor settings or plugins is creating a difference? Nonetheless, glad this is working and thanks for interacting! If more people report issues, I'll add your snippet into the .txt file as one possible solution option. Happy web designing!
It's awesome, but on my side, I don't have the "Interraction" option in the content tab, so my accordion is open by default. How can I have it closed by default?
You may be on an old version of Elementor. This script may help close that accordion by default... jQuery(document).ready(function($) { var delay = 100; setTimeout(function() { $('.elementor-tab-title').removeClass('elementor-active'); $('.elementor-tab-content').css('display', 'none'); }, delay); });
Hey thanks for the video, I can't seem to get it working with my elementor free. I'll put the code snippet into the global custom CSS and nothing changes. I end up with what you have when you remove the text-expander class from your accordion CSS classes, just a "Read MoreLess" accordion (I made sure that "text-expander" is in my own accordion CSS classes). Any help would be really appreciated, thank you
Could it be this? *** Note: if your expander has stopped working, it could be due to the fact that Elementor recently changed a CSS class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix.
Hi, thanks for the video, but I'm a beginner...but I can't find at the link you put in the description the css code to copy and paste. Where can I find it? Thanks
Hi ,Thanks for the video, I got it to work. I want to move the read less button to the bottom of the page. How do I achieve that? It would be really helpful if you could point me towards helpful resources. Thanks!!
I think you need to have containers enabled as well as the nested elements feature. See Elementor > Settings > Features. Once you switch to containers, it's a different world so be prepared to move from Sections and Columns approach.
I can confirm this works on Elementor 3.21.0 as I tested it today. Make sure the containers experiment is enabled, the 'text-expander' class is added to the accordion, the 'Read MoreLess' markup is used for the toggle title, and you have the latest CSS: .text-expander .e-n-accordion-item span.read-less { display: none; } .text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-more { display: none; } .text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-less { display: inline; }
You should be able to put custom CSS into a Wordpress site many different ways without needing to pay. Perhaps the most intuitive would be with the use of a plugin like WPCode (wordpress.org/plugins/insert-headers-and-footers/), but it can also be done with a child theme.
@@KingGrizzly Fiirst - an excellent video. secondly thank you so much for your early reply with a possible solution. Much appreciated. (I still need to work out what a child theme is)
@@KingGrizzly man i found a problem. Everytime i refresh the page, the texts that should be hiden is shown without any click on read more. What do i do?
Fair enough. The code formatting was getting messed up when pasting into the YT description at the time and we are providing value for free, under no obligation to do so. Still, if you look through the comments here, I was able to paste the full code in comments.
The simplest way I've seen so far to do this "dropdown" with CSS! Genius! Greetings from Brasil (yes, Brasil is with an S)! :D
Hola from Colorado, USA. It's exciting to have comments from Brasil with an "s"!
@@KingGrizzly where do you stay in Colorado?
For the Accordion > Advanced > Custom CSS, this also works:
selector .read-less {
display: none;
}
selector .e-normal[open] .read-more {
display: none;
}
selector .e-normal[open] .read-less {
display: inline;
}
Thank you!
after latest elementor update .e-normal[open] should be replaced with .elementor-tab-title.elementor-active
@@muniboubari5628 this worked for me. thanks!
@@muniboubari5628 Thank you!
This worked brilliantly, bless you!
Wow! This was so helpful. I wanted a way to prevent an employee bio from being a mile long on mobile, and this is it. I just duplicated the text widget, dragged it into the accordion with your instructions, and changed the responsiveness. I was very proud of myself. I have only been playing with Elementor for a year or so, and only a couple hours a week really. I own a law firm SEO agency, and I could send a two-sentence text to my developer, but what fun would that be? Makes the admin less grueling. ***Quick question: I added the CSS to the widget itself and not to the site settings. What is the drawback to this? I assume there must be one, or you would have done that. Thanks a million!
Good job, I'm glad this helped! Pros and cons which come to mind with putting the CSS on the widget itself:
Pro(s):
- The CSS only loads where it is need instead of on all pages
Con(s):
- If you have more than one widget on pages, you don't really want to be duplicating the CSS over and over
- CSS pasted on widgets can be confusing for other developers to find vs. committing to centralize all styling in one predictable place. We like to use WP Code to manage modular snippets: wpcode.com/
@@KingGrizzly Excellent! Thanks for the info.
Genius! And now it's possibe to do it without CSS I think. Thanks a lot.
the css in video is different with the snippets, not working
I had to update the snippet to account for Elementor changes. The updated snippet should work if you have containers and nested elements enabled. Let me know if this doesn't work and I'll doublecheck the snippet. Thanks!
Okay so if anyone can be helped with this -
1) If you have container enabled and nested elements in elementor settings then this code will work (also will get option to add widgets or other elementor elements like in the video) -
.text-expander .e-n-accordion-item span.read-less {
display: none;
}
.text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-more {
display: none;
}
.text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-less {
display: inline;
}
2) If the above one does not work then it means container and nested elements are not turned on so this will work -
selector .elementor-accordion-item .read-less {
display: none;
}
selector .elementor-active .elementor-accordion-title .read-more {
display: none;
}
selector .elementor-active .elementor-accordion-title .read-less {
display: inline;
}
Thank you for your time :)
Hi, where is the CSS code to copy and paste? Thanks!
Hi, just saw this. There is a link to get the latest snippet in the description and others have posted versions of snippets in comments. Please let us know if you have any trouble getting it working.
Thank you, i was looking for this yesterday and when expand read more changes to read less. And i found you made this nice solution.
It was made for you! Good luck with your projects.
@@KingGrizzly Thank you
Perfect for keeping your page nice and clean for SEO
Less plugins = better!
New change in elementor code, e-n-accordion-item doesn't appear anymore:
selector .elementor-accordion-item .read-less {
display: none;
}
selector .elementor-active .elementor-accordion-title .read-more {
display: none;
}
selector .elementor-active .elementor-accordion-title .read-less {
display: inline;
}
css classes will same or change the name?
I can still see .e-n-accordion-item in version 3.21.0. The snippet still works for me. See my comment to @muhammadabdullahmanzoor6172
@@KingGrizzly the accordion default mode is open. How to fix (elmentor pro 3.21.1 and elmentor 3.21.3 ) elmentor any changes ?
@@ganaa_sb There should be an option to start with the accordion closed. If you select that option I think it should work.
Thank you !! You code is the only one working for me :)
both less and more classes are visible at normal state dont know where i am getting it wrong
I have the same problem. Something may have changed in Elementor... no longer works as shown. I see "Read MoreLess" in my accordion title.
For the Accordion > Advanced > Custom CSS, this also works:
selector .read-less {
display: none;
}
selector .e-normal[open] .read-more {
display: none;
}
selector .e-normal[open] .read-less {
display: inline;
}
i have used this and it works fine@@theresasouthern8631
@@theresasouthern8631 Elementor has changed a class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix.
@@KingGrizzly this doesn't work for me even with this change.
@@BrunoBrozovic @muniboubari5628 figured out "after latest elementor update .e-normal[open] should be replaced with .elementor-tab-title.elementor-active" I did that and it worked. However, my default state on the website is the full visible text. Not sure now if I'm supposed to add the script @kinggrizzly mentions or where. Hmm, sorry @kingGrizzly, no good deed goes unpunished I guess 🙂
Hi! Even after updating Elementor I dont have the Accordeon like you. It doens´t have that many options and the content definetely doesn behave like a container. How can I get it? ...
Are you on Pro? I'm trying to remember if this is a Pro feature. Also, Elementor now has the ability to turn widgets on and off under the "Elementor > Element Manager" from the main Wordpress menu. Maybe see if some of the widgets are turned off?
@@KingGrizzly yes yes, Elementor Pro, all updated. The thing is that I do have Acordeon widget but it doesn´t have that many options like in your video. Is it possible that since I´m from the Czech republic I might have different version of Elementor??.... thanks!
@@TINYbeatboxer I wouldn't think the Czech version would be any different. Are you a member of the Elementor Facebook group ( facebook.com/groups/Elementors )? If you put a screenshot in there, people might be able to give you a good answer. The other idea would be to go to Elementor > Features and try turning on Nested elements. Maybe this will change what the accordion is capable of?
For me the read-more and read-less classes show up on the backend elementor and it all works, but when loading the frontend of the site it does not work because the classes don't exist. It seems to load everything from the Read MoreLess except the class='read-more' and read-less. It loads the spans and More/Less content, but not the classes. Weirdly also the parent element class of the p element is not loaded either.
Any chance an optimizer plugin could be stripping those? Are they still there if you exit editing the page but then load it up again? Or do the classes gets stripped out in the editor too?
Please help I need customize the behavior of the “Read More” button so that it opens the additional content upwards, placing the button to minimize at the bottom of the expanded area. This way, the button isn’t positioned between the two sets of information, which makes for a cleaner and more user-friendly layout
This would be a nicer user experience, I agree. The Elementor accordion doesn't seem to have the option to open upwards. I tried to override it with some CSS/JS briefly and had limited success.
Are you simply expanding text? If so, it's probably easier to dynamically shorten a large block of text using some javascript and a "Read More" toggle.
If you are hoping to incorporate rich content, like an Elementor layout, then it will be necessary to come up with CSS/JS to override the widget, make a custom widget, or use an add on.
If I figure out how to do it, I'll make a video! Let me know if you solve it too.
My Read More / Read Less doesn't do that animation, any idea of why?
Are you running any performance optimizations plugins or tools such as WP Rocket, Flying Scripts, Siteground Optimizer, etc.? If so, they could be causing your animation to fail. Quick test would be to turn off the plugin to see if the problem goes away. If it does go away, then the plugin settings would need to be adjusted to allow Elementor animations. Let us know what you find out.
@@KingGrizzly Nope, no optimization plugins installed
please share the css code
It's not working for me now. It is saying the span.read-more and span.read-less part is incorrect in the code.
Has anyone else run into the issue of having the accordion automatically open rather than just showing "Read More" on the load? Any ideas on how to fix that?
There should be a toggle option whether you want the accordion to be open or closed by default.
@@KingGrizzly Hmm that's so weird I can't find it anywhere
@@maryseibert5000 I'm using the accordion widget and the control is under the Content > Interactions tab.
If you don't see this, you may be using the old accordion widget. I believe you may need to go to your Elementor > Settings and then enable containers as well as nested content.
Be forewarned, this may force you to stop using sections and start using containers which are a much different paradigm.
Could be wrong, but I think something along these lines may be required to get the latest accordion widget enabled.
i cant find that interactions tab in accordion
Thanks a lot. One issue: I have two accordeons on one page. I can only open the second (lowest) accordeon if the first one is opened. What do I have to change?
I'm not certain I'm understanding you. The original CSS seems to work with multiple toggle widgets on the same page with no issue.
Are you creating multiple "Read More" toggles with one widget?
I think you should only do one instance per widget. So, duplicate one widget with a single toggle versus adding two toggles to one widget.
@@KingGrizzly Sorry, it had nothing to do with your code etc. I just styled a picture under the widget wrongly.... Thanks for your replies.
Hi Thanks for the video. How do i implement the code to move the read-less button to the bottom? Thanks in advance.
You might be able to write some CSS or JS to change the position of the "Read Less" text when the toggle is open. I haven't tried this, but it's a good idea.
Almost got it! ... I copied the code(s) directly and My "Read More" looks normal in the backend, but it the front end it reads "Read MoreLess"... I have tried and tried to fiddle with it, but I can't seem to get it... Anyone have a solution for this? Thx!
Elementor has changed a class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix.
Love the way this looks to work but can't get mine to not show as Read MoreLess. Have changed the css as mentioned below without success
Great tutorial, but there is no chance for me to drop in a video like you did it.
I would like to hide a whole container and make it visible with a "read more..." function.
If you go to Elementor > Settings > Features and make sure Flexbox Container and Nested Elements are turned on, then I think you should be able to put whatever you want in an accordion using the latest version of the widget.
Your Elementor Pro
GUI left side menu has more options than my own. I have latest plugin version installed? I don't seem to be able to get the Accordion > Advanced > Custom CSS to work?
Hmmm, I think there may be an updated UI with icons across the top now. I see an experimental feature which can be turned on an off: Elementor > Features: "Editor Top Bar". elementor.com/help/elementor-top-bar/. Could the custom CSS be up there now?
Thank you for replying. I believe I now have the latest version installed and have the new features enabled. But I still cannot get the code to work. Also when I paste the code snippet into 'Custom Code' I see a warning which Seays 'Don't use adding classes. Element (Span.read-more) is overqualified, just use .read-more without element name. Could there be something I need to enable in Elementor settings? Would you be happy to share your settings in case this has any difference. Thanks I appreciate you sharing and responding..@@KingGrizzly
I realise now what I was doing wrong. I had a period placed before the 'text-expander' in the 'CSS Classes box'. Great video! I got there in the end!
I take it back! Its still not working?? Having the same result as @LScustomfloors. Works on back end but on front end I'm seeing 'ReadMoreLess' in closed state and "Read Less" in open state.
@@alexorrow Figured it out. Elementor has changed a class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix. Now... to go figure out where I need to update CSS.
Very timely solution 😊 thank you. Was looking for such a solution yesterday
Same here! Ha ha.
When I copy and paste your CSS code, it gives an alert message: Don't use adjoining classes. Element (span.read-more) is overqualified, just use .read-more without element name. And some words in my CSS code are presented in red font colour (the words: span and open). Any idea what I might be doing wrong?
Hi Thomas. Sometimes the code syntax highlighting isn't actually a problem, just a recommendation. Does the code fail to work for you? If it works, you probably don't need to worry about it. If it fails to work, something is wrong.
@@KingGrizzly something is wrong then. But what could that possibly be? Any guidance would be very much appreciated!
@@thomasschuurmans4838 Hard to say without taking a look.Did you hand type the snippet? I know we had kind of an annoying "opt in" to get the snippet, but the latest should work.
Otherwise, if you want me to take a look, feel free to email brian@(ourbrandname).com and I can take a look!
@KingGrizzly my colleague got it to work. This works. He noticed that the snippet does not take into account recent elementor updates. Also we had not activated the flexbox container for elementor.
Snippet that works:
selector .elementor-accordion-item .read-less {
display: none;
}
selector .elementor-active .elementor-accordion-title .read-more {
display: none;
}
selector .elementor-active .elementor-accordion-title .read-less {
display: inline;
}
@@thomasschuurmans4838 Thanks for sharing. This is interesting because I've got an up to date site with the accordion running and the classes are like the ones in my snippet. I don't see the .elementor-accordion-title class in the HTML markup anywhere. So I'm wondering if your colleague added that class or if some variation in our Elementor settings or plugins is creating a difference?
Nonetheless, glad this is working and thanks for interacting! If more people report issues, I'll add your snippet into the .txt file as one possible solution option.
Happy web designing!
It's awesome, but on my side, I don't have the "Interraction" option in the content tab, so my accordion is open by default. How can I have it closed by default?
You may be on an old version of Elementor. This script may help close that accordion by default...
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
@@KingGrizzly Doesn't work, also I have the latest free version of elementor
Sooo easy and straight to the point! Thank you so much :)
Hey thanks for the video, I can't seem to get it working with my elementor free. I'll put the code snippet into the global custom CSS and nothing changes. I end up with what you have when you remove the text-expander class from your accordion CSS classes, just a "Read MoreLess" accordion (I made sure that "text-expander" is in my own accordion CSS classes). Any help would be really appreciated, thank you
Could it be this? *** Note: if your expander has stopped working, it could be due to the fact that Elementor recently changed a CSS class. Change '.text-expander .e-normal span.read-less' to '.text-expander .e-n-accordion-item span.read-less' in your CSS and it should fix.
Man you are so genius. Thank you so much for this trick
If only it were true! Thanks for watching and happy web designing.
Hi, thanks for the video, but I'm a beginner...but I can't find at the link you put in the description the css code to copy and paste. Where can I find it? Thanks
Try this: kinggrizzly.com/wp-content/uploads/snippets/elementor-read-more-expander-snippets.txt
@@KingGrizzly Thank you very much. You are really very kind.
@@deniserana6449 Happy to help. Please subscribe for more Elementor how to content! 🙂
Thanks - Although the CSS class are not similar when I checked my site but it gives the picture on how to do it.
Hi ,Thanks for the video, I got it to
work. I want to move the read less button to the bottom of the page. How do I achieve that? It would be really helpful if you could point me towards helpful resources. Thanks!!
VERY random question but how the heck does your accordion let you add a widget within it?! Mine is already placed with text
I think you need to have containers enabled as well as the nested elements feature. See Elementor > Settings > Features.
Once you switch to containers, it's a different world so be prepared to move from Sections and Columns approach.
create a fresh video on it. that code is not working still same issue facing after reading the comments
I can confirm this works on Elementor 3.21.0 as I tested it today. Make sure the containers experiment is enabled, the 'text-expander' class is added to the accordion, the 'Read MoreLess' markup is used for the toggle title, and you have the latest CSS:
.text-expander .e-n-accordion-item span.read-less {
display: none;
}
.text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-more {
display: none;
}
.text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-less {
display: inline;
}
mate , can you give a link to a template json file with this page ????? this will be a life saver for me ....
Of course, one needs to upgrade elementor for custom CSS to work - so not that cheap. Wish you made that clearer at the start,
You should be able to put custom CSS into a Wordpress site many different ways without needing to pay. Perhaps the most intuitive would be with the use of a plugin like WPCode (wordpress.org/plugins/insert-headers-and-footers/), but it can also be done with a child theme.
@@KingGrizzly
Fiirst - an excellent video. secondly thank you so much for your early reply with a possible solution. Much appreciated. (I still need to work out what a child theme is)
Hey, this looks great. I dont have interactions showing in my side bar... not sure why.
Not sure what you mean by "interactions"?
Sorted it. I had to have nested elements active in elementor settings.@@KingGrizzly
Great! Such a fun trick to get this to work. Thanks!
Glad this worked for you!
Thank you for this, you just saved my life! 😂
Thanks for advice!
this is elementor pro please mention that in the video
Thanks, I'll try to mention in future videos. We use Pro for all builds.
it works thanks
why you show us a ready made work and you don't start from scratch . Some of us are idiots
I will try to do a better job of starting from scratch so no steps are missed. Thank you for pointing this out!
Sounds easy enough
does not work
This has worked for many people. Happy to help if you want to give some specifics on what isn't working for you.
Perfect man you the greatest
You made me smile. Glad this helped! Be well.
@@KingGrizzly man i found a problem. Everytime i refresh the page, the texts that should be hiden is shown without any click on read more. What do i do?
@@kitvidanova2024 Are you running any script optimization plugins like WP Rocket?
This is really smart tho.
dislike video is not full !
A very big dislike
for asking my email
Fair enough. The code formatting was getting messed up when pasting into the YT description at the time and we are providing value for free, under no obligation to do so. Still, if you look through the comments here, I was able to paste the full code in comments.
Who needs working CSS code on Elementor version 3.21.8
CSS code:
.text-expander .e-n-accordion-item span.read-less { display: none; }
.text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-more { display: none; }
.text-expander.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title span.read-less { display: inline; }