How To Create An Unfold Widget With Elementor For Free
ฝัง
- เผยแพร่เมื่อ 4 ก.ย. 2024
- in this video we going to create an unfold effect using elementos containers and a litle bit of code
important: delete the hashtag in the buttons link field
link to the code:
filenewcreate....
download my unfold template:
filenewcreate....
I hardly comment on videos but this video is super helpful and creating the elementor version just adds to the super value. Thanks so much
The code is working like a charm just make sure you remove any link from the button to avoid when clicking the button back automatically to the TOP of the page Thank you.
brandoope im happy it works for you, regarding the jump i forgot to do it in the video, added in the video decription
How have I not come across your channel before?!? My preferred tools are Elementor and Crocoblock, so this is brilliant - thank you! Also saw in your bio you're based in Israel, sending much love and support to you and your loved ones.
Welcome to the channel! Thank you so much for the kind words! I'm glad you found the content useful. Elementor and Crocoblock are fantastic tools, and I’m happy to share tips on them.
Amazing Content
THANK YOU THANK YOU THANK YOU. So easy to follow. Clear and concise
Unfortunately, it didn't work for me either, but since you uploaded the template, it works. Thanks for this good template!
Where and how do we upload the template?
thanks for the guide !
Thank you for this !
Works perfectly fine. And thanks for the # on the button comment. Sometimes we forget about the most logical and easiest things when going to solve issues... Great video!
I was doing that with CSS and wasn't as smooth as I wanted.
Your video is fantastic !
Thanks again
You're welcome! Thanks for the feedback.
Thank you so much for this tutorial! Saved my life!
Hello
This is great
Only when the container is closed, the end of the border can gradually disappear
I would be very grateful if you make the codes in this way
this
Thank you very much, and long live you.
Great stuff! Thanks a million!
works flawlessly. very good tutorial. im impressed. thanks a lot bro :DD
Thank you for your feedback! I'm really happy to hear that the tutorial worked well for you.
Excellent guidance! In the 3rd hoverbtn method, can you please teach us extra on how to make the unfolded content continue to show unless next 4th listing (let's say we have 4 containers in total) is hovered? Thank you!
Hello,
Can you please help me out with the button.
Problem BUTTON TRIGGER:
When i press on the button, the page slides all the way back up to the menu.
It would be nice when I press on the button that it stays on the same spot.
I would be happy with your feedback.
select the button, in the content tab go to the link field and delete the hashtag
prnt.sc/nuyjSP2tdR7R
Exactly what I need. But I have one issue: If I set the hidden part to full width the effect doesn´t work anymore. Only if I set boxed style for the hidden content. How can I fix that?
How does it work with Section and Inner Section?
Could you please guide us?
Your code is not working with Section and inner section.
Helllo! First thanks for the time you put into this video. I've seen in the comment many ppl struggling (like me) : 2min46 I think is where the mistake happen. Looking at the navigator, the hidden content become nested into the unfold container whitch was not the case previously into the explanation?
A bit of a late answer but yes you're right! The button trigger didn't work for me until I drop the hidden content into the unfold container. Thanks a lot!
can we use image instead of text "show more"? i want to put image instead of text show more.
I would also like to know this
Great tutorial! I have one request though, is it possible to use an icon instead of text or to just remove the "show more" and "show less" option from the code and just keep the button unchanged?
Could you help me out with this? It would be a great help.
Thank you!
Great to hear you found the tutorial helpful! let me try to help you.
For the first option, if you prefer not to display the "show more" and "show less" text, you can achieve this by giving the text the same color as the button. This will effectively make the text invisible while keeping the button unchanged in appearance.
Regarding the second option, replacing the text with an icon is absolutely possible. I've updated the code for you to incorporate icons instead of text. To do this, you'll need to add the desired icon SVG to your media library. Once you have the link to the icon, simply replace the icon URLs in the code with the links to your icons.
Additionally, you can control the size of the icons in the code. Currently, the size is set to 20 pixels by 20 pixels. Feel free to adjust this size according to your preferences.
here is the new code:
.contentcon > .e-con-inner > .e-con-boxed.e-con {
max-height: 350px;
overflow: hidden;
transition:.4s ease;
}
document.addEventListener("DOMContentLoaded", function() {
var btns = document.querySelectorAll('.openbtn');
for(let btn of btns){
let self = btn,
// Define icon URLs
iconCloseBtn = 'filenewcreate.com/wp-content/uploads/2024/04/arrow-narrow-down-svgrepo-com.svg',
iconOpenBtn = 'filenewcreate.com/wp-content/uploads/2024/04/arrow-up-svgrepo-com.svg',
// Specify the size of the icons
iconSize = 'width:20px; height:20px;', // Example size, adjust as needed
currentBtnIconContainer = self.querySelector('a'),
currentTxt = self.previousElementSibling.querySelector('.e-con-inner > .e-con-boxed.e-con'),
currentTxtHeight = currentTxt.scrollHeight;
// Set the initial icon to the "close" icon
currentBtnIconContainer.innerHTML = '';
self.addEventListener('click', function(){
if(currentTxt.getAttribute('style')){
// Set the innerHTML to use the "show more" icon with specified size
currentBtnIconContainer.innerHTML = '';
currentTxt.setAttribute('style', '');
} else {
// Set the innerHTML to use the "show less" icon with specified size
currentBtnIconContainer.innerHTML = '';
currentTxt.setAttribute('style', 'max-height:' + currentTxtHeight + 'px');
}
});
}
});
prnt.sc/o2KVlsJFGTaI
@@crocomentor thank you very much!
Master!! Thank you so much!
my pleasure, I'm glad you liked it
Good Work
Fantastic! Thanks so much. Instant sub :)
@ElementoryMyDearWatson glad you liked it
I did everything in the video and it works 100%.
Thanks for sharing. But I have a question:
How to do the same but with sites with Elementor without the version of the containers and the inner sections exist?
You don't want to use containers or inner sections?
@@crocomentor The site has inner sections. It is not created with containers and therefore the code would not apply. The question is: how to solve or adapt what you explained in your video to this type of situation?
yes, you can make the unfold effect work with inner sections(but with different code). But honestly, it's much smoother and easier with containers. I'd advise your client to switch over - it just works way better!, convert the section to containers on the site, is the best solution
@@crocomentor im using container but its not working anymore :(
Love your amazing tutorials!
Quick question, i want to use the firs unfold effect but make it on a text editor widget and not on a container, i tried adding the CSS Class to the text editor widget but it's not working, i also tried to change the classes in the SCRIPT code but with no luck.
Can you help me with this?
Thanks
i'm making a tutorial for you coming soon
@@crocomentor you are the best!!!!
th-cam.com/video/eJyZNk7Rppg/w-d-xo.html
Looks great until you try to change the button text color. It breaks. Why is button color set to white in the css?
prnt.sc/9z-DCxD4HGvr
Works fine but I am having trouble making this full width. I need it to be full width. Please help. And thanks so much for the knowledge!
hey, countbang made a video for you click this link
filenewcreate.com/countbang
@@crocomentor Thanks so much!!!
thank you so much!! i just opened a ticket for elementor with kind of a similar question, how can i reach out to you to talk with you?
I made inside a loop item but as the component repeat it self inside de page it opens just fine but everytime I click on the button the page scrolls to the top. Do you have any idea how to fix?
And thank you so much for this content.
To fix the jump, delete the hashtag in the button link field.
prnt.sc/nuyjSP2tdR7R
@@crocomentor It worked, thank you so much!
You're welcome!
@@crocomentor
Hey another one - I use this to create a loop item, and then apply the taxonomy filter (example of options in the filter: All, A, B, C) When is on all that is default and the first one it works perfectly but when I select the option A at the filter does not work anymore (I make the hover version). The url changes when the filter it's applied. Dont know if that could be a problem.
Unfortunately, the unfold effect doesn't work well inside loops, but this is what you can try doing:elementor taxanomy filter doesnt have a reload option only ajax so You need to create a taxonomy filter with JetSmartFilters and set the apply type to 'reload'. Don't forget to toggle on the 'show apply button, it should work
prnt.sc/AQbZxDHtwgBg
ok, como poner el texto que se ve en el tercer ejemplo un poco borroso
I was looking for this unfold effect in plugins for a new design but they are not so flexible!
although I repeated the process a dozen times! but I cannot make it to work. do you have any pointers I might do wrong?
hi eric, make sure
1.you are using containers
2.you are naming the right containers with the right css class
3.the button is in the right container and has a css class name
4.try first the box trigger version
tell me if it helped
thank you~
doesn't it work for gutenberg too? thanks for your Work
it doesn't, only with Elementor
@@crocomentor thanks 🙏
How do we install your Unfold template once we've downloaded it?
filenewcreate.com/elementor-21164/
@@crocomentor Very helpful. Thanks so much.
Could this work inside a carousel?
I checked, and unfortunately, it doesn't.
When I click the button to show the content it works, but it scrolls to the top of the page. Is there any way to stop that?
thanks frontier forever for pointing that out i wasnt aware.
to fix it select the button go to content and delete the hash tag from the link field that should do it and also i
modified the code so go grab the new code
filenewcreate.com/ulfold-effects-code/
I followed the steps but when press the button text won’t open. Tried to place button under different container but then it would disappear completely. How can I make button work?
I'm sorry to hear that download my unfold templates from the video
filenewcreate.com/unfold-template/
@@crocomentor i download it but it says error :(
i tried in add plugin and add themes both didnt work
ive added a video to this page watch the video
filenewcreate.com/unfold-template/
plz help it's not working help i need it for team members paage
use my template(just delete the version u dont want to use)
filenewcreate.com/unfold-template/
Can't get this to work followed everything in the video to a T. Even named all of my containers the same thing. *shrug*
zach it should work make sure the container structure and the css classes are correct maybe start with the version without the buttun see if that works.
Thank You for this, works almost perfect 🙂
On mobile (Iphone, Crome and Safari) i does not unfold completely.
Do you have any idea why?
i fixed it, go get the new code , it should work now
spent an hour could not get it to work - :(
It's unfortunate that some users experience this issue, However, to simplify the process, I've created an unfold template that you can download.
filenewcreate.com/unfold-template/
i could not get it to work
it should work follow my exact steps dont skip anything
Hello,
I have found a problem in on of the buttons. Button triger en Hover trigger are working fine. Box trigger does not work.
Can you please guide me in this one?
Thank you in advance
download and use my template
filenewcreate.com/unfold-template/
I downloaded as a zipfile....and what to do then with it?@@crocomentor