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/
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!!
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
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?
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.
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.
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!
@@tinybeat4507 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?
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); });
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.
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.
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.
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.
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.
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 🙂
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.
@@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?
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; }
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.
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!
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"!
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!
Genius! And now it's possibe to do it without CSS I think. Thanks a lot.
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.
Perfect for keeping your page nice and clean for SEO
Less plugins = better!
Thanks for advice!
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
Thank you for this, you just saved my life! 😂
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, 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!!
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! 🙂
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 :)
Very timely solution 😊 thank you. Was looking for such a solution yesterday
Same here! Ha ha.
Thanks - Although the CSS class are not similar when I checked my site but it gives the picture on how to do it.
It's not working for me now. It is saying the span.read-more and span.read-less part is incorrect in the code.
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
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?
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.
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! 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!
@@tinybeat4507 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?
Sooo easy and straight to the point! Thank you so much :)
Great! Such a fun trick to get this to work. Thanks!
Glad this worked for you!
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
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.
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.
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.
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
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.
it works thanks
mate , can you give a link to a template json file with this page ????? this will be a life saver for me ....
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
Sounds easy enough
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 🙂
i cant find that interactions tab in accordion
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.
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.
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;
}
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!
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.
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!
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; }