No video

How To Create An Unfold Widget With Elementor For Free

  Рет қаралды 9,039

Croco Mentor

Croco Mentor

Жыл бұрын

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....

Пікірлер: 84
@the.kristihall
@the.kristihall 16 күн бұрын
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.
@crocomentor
@crocomentor 15 күн бұрын
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.
@ninemarketer
@ninemarketer Жыл бұрын
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.
@crocomentor
@crocomentor Жыл бұрын
brandoope im happy it works for you, regarding the jump i forgot to do it in the video, added in the video decription
@Bijoy420
@Bijoy420 13 күн бұрын
Thank you very much, and long live you.
@toni_jaay
@toni_jaay 4 ай бұрын
THANK YOU THANK YOU THANK YOU. So easy to follow. Clear and concise
@multa7053
@multa7053 5 ай бұрын
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!
@G3d3cSke
@G3d3cSke 6 ай бұрын
Unfortunately, it didn't work for me either, but since you uploaded the template, it works. Thanks for this good template!
@ysa3426
@ysa3426 6 ай бұрын
Where and how do we upload the template?
@DeepakGuptaDeeps
@DeepakGuptaDeeps 3 ай бұрын
How does it work with Section and Inner Section? Could you please guide us? Your code is not working with Section and inner section.
@user-tk8pq3uk9r
@user-tk8pq3uk9r 9 ай бұрын
I was doing that with CSS and wasn't as smooth as I wanted. Your video is fantastic ! Thanks again
@crocomentor
@crocomentor 9 ай бұрын
You're welcome! Thanks for the feedback.
@user-jc2cx6yn2o
@user-jc2cx6yn2o 5 ай бұрын
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?
@belzebeta
@belzebeta 2 ай бұрын
Thank you so much for this tutorial! Saved my life!
@Kadhimiya
@Kadhimiya Жыл бұрын
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
@burnhardo
@burnhardo 6 ай бұрын
this
@aljonoeskaaljonoeska914
@aljonoeskaaljonoeska914 11 ай бұрын
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.
@crocomentor
@crocomentor 11 ай бұрын
select the button, in the content tab go to the link field and delete the hashtag prnt.sc/nuyjSP2tdR7R
@yoonssam_kr
@yoonssam_kr 7 ай бұрын
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!
@mortensuperlite
@mortensuperlite 6 ай бұрын
Looks great until you try to change the button text color. It breaks. Why is button color set to white in the css?
@crocomentor
@crocomentor 6 ай бұрын
prnt.sc/9z-DCxD4HGvr
@dontopa128
@dontopa128 9 ай бұрын
can we use image instead of text "show more"? i want to put image instead of text show more.
@ALGOChannel
@ALGOChannel 4 ай бұрын
I would also like to know this
@nelligantetrault2135
@nelligantetrault2135 Жыл бұрын
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?
@raoq1028
@raoq1028 6 ай бұрын
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!
@dontopa128
@dontopa128 9 ай бұрын
works flawlessly. very good tutorial. im impressed. thanks a lot bro :DD
@crocomentor
@crocomentor 9 ай бұрын
Thank you for your feedback! I'm really happy to hear that the tutorial worked well for you.
@PintoTV
@PintoTV 4 ай бұрын
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
@crocomentor
@crocomentor 4 ай бұрын
i'm making a tutorial for you coming soon
@PintoTV
@PintoTV 4 ай бұрын
@@crocomentor you are the best!!!!
@crocomentor
@crocomentor 4 ай бұрын
kzbin.info/www/bejne/m3vci4GhbLejpsk
@ALGOChannel
@ALGOChannel 4 ай бұрын
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!
@crocomentor
@crocomentor 4 ай бұрын
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'); } }); } });
@crocomentor
@crocomentor 4 ай бұрын
prnt.sc/o2KVlsJFGTaI
@ALGOChannel
@ALGOChannel 4 ай бұрын
@@crocomentor thank you very much!
@aymericzambo1914
@aymericzambo1914 2 ай бұрын
Great stuff! Thanks a million!
@kafetabooks
@kafetabooks Жыл бұрын
ok, como poner el texto que se ve en el tercer ejemplo un poco borroso
@edobarriosruiz
@edobarriosruiz 10 ай бұрын
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?
@crocomentor
@crocomentor 10 ай бұрын
You don't want to use containers or inner sections?
@edobarriosruiz
@edobarriosruiz 10 ай бұрын
@@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?
@crocomentor
@crocomentor 10 ай бұрын
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
@YaronRosen
@YaronRosen Жыл бұрын
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?
@mariakw8926
@mariakw8926 2 ай бұрын
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.
@crocomentor
@crocomentor 2 ай бұрын
To fix the jump, delete the hashtag in the button link field. prnt.sc/nuyjSP2tdR7R
@mariakw8926
@mariakw8926 2 ай бұрын
@@crocomentor It worked, thank you so much!
@crocomentor
@crocomentor 2 ай бұрын
You're welcome!
@mariakw8926
@mariakw8926 2 ай бұрын
@@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.
@crocomentor
@crocomentor 2 ай бұрын
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
@ericm7593
@ericm7593 Жыл бұрын
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?
@crocomentor
@crocomentor Жыл бұрын
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
@countbang1305
@countbang1305 11 ай бұрын
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!
@crocomentor
@crocomentor 11 ай бұрын
hey, countbang made a video for you click this link filenewcreate.com/countbang
@countbang1305
@countbang1305 11 ай бұрын
@@crocomentor Thanks so much!!!
@allyterry4753
@allyterry4753 Жыл бұрын
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?
@crocomentor
@crocomentor Жыл бұрын
I'm sorry to hear that download my unfold templates from the video filenewcreate.com/unfold-template/
@aljonoeskaaljonoeska914
@aljonoeskaaljonoeska914 11 ай бұрын
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
@crocomentor
@crocomentor 11 ай бұрын
download and use my template filenewcreate.com/unfold-template/
@aljonoeskaaljonoeska914
@aljonoeskaaljonoeska914 11 ай бұрын
I downloaded as a zipfile....and what to do then with it?@@crocomentor
@advanced-developers
@advanced-developers 10 ай бұрын
Good Work
@Frontier-Forever
@Frontier-Forever Жыл бұрын
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?
@crocomentor
@crocomentor Жыл бұрын
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/
@paulpetkovtrio
@paulpetkovtrio 8 күн бұрын
doesn't it work for gutenberg too? thanks for your Work
@crocomentor
@crocomentor 6 күн бұрын
it doesn't, only with Elementor
@paulpetkovtrio
@paulpetkovtrio 6 күн бұрын
@@crocomentor thanks 🙏
@AnnetteSpurr
@AnnetteSpurr 2 ай бұрын
How do we install your Unfold template once we've downloaded it?
@crocomentor
@crocomentor 2 ай бұрын
filenewcreate.com/elementor-21164/
@AnnetteSpurr
@AnnetteSpurr 2 ай бұрын
@@crocomentor Very helpful. Thanks so much.
@ElementoryMyDearWatson
@ElementoryMyDearWatson 9 ай бұрын
Fantastic! Thanks so much. Instant sub :)
@crocomentor
@crocomentor 9 ай бұрын
@ElementoryMyDearWatson glad you liked it
@danielfagav
@danielfagav Жыл бұрын
Master!! Thank you so much!
@crocomentor
@crocomentor Жыл бұрын
my pleasure, I'm glad you liked it
@virgilpillay
@virgilpillay 8 ай бұрын
Could this work inside a carousel?
@crocomentor
@crocomentor 8 ай бұрын
I checked, and unfortunately, it doesn't.
@andersjessen2385
@andersjessen2385 Жыл бұрын
Thank You for this, works almost perfect 🙂 On mobile (Iphone, Crome and Safari) i does not unfold completely. Do you have any idea why?
@crocomentor
@crocomentor Жыл бұрын
i fixed it, go get the new code , it should work now
@zalimpubgm1088
@zalimpubgm1088 6 күн бұрын
plz help it's not working help i need it for team members paage
@crocomentor
@crocomentor 6 күн бұрын
use my template(just delete the version u dont want to use) filenewcreate.com/unfold-template/
@empress4140
@empress4140 Жыл бұрын
thank you~
@zachmortimer
@zachmortimer Жыл бұрын
Can't get this to work followed everything in the video to a T. Even named all of my containers the same thing. *shrug*
@crocomentor
@crocomentor Жыл бұрын
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.
@olutobifemi-oke3399
@olutobifemi-oke3399 Жыл бұрын
i could not get it to work
@crocomentor
@crocomentor Жыл бұрын
it should work follow my exact steps dont skip anything
@jenniferward6821
@jenniferward6821 Жыл бұрын
spent an hour could not get it to work - :(
@crocomentor
@crocomentor Жыл бұрын
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/
Show More/Show Less... using Elementor (Free)
14:53
Jim Fahad Digital
Рет қаралды 49 М.
لااا! هذه البرتقالة مزعجة جدًا #قصير
00:15
One More Arabic
Рет қаралды 51 МЛН
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 12 МЛН
If Barbie came to life! 💝
00:37
Meow-some! Reacts
Рет қаралды 56 МЛН
Pool Bed Prank By My Grandpa 😂 #funny
00:47
SKITS
Рет қаралды 18 МЛН
13 Things To Remove From Your Website Immediately
12:33
Orbit Media Studios
Рет қаралды 305 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 939 М.
How to Apply Read More Widget for Elementor | JetTricks Plugin
5:46
How I Coded An Entire Website Using ChatGPT
18:22
Nick White
Рет қаралды 1,9 МЛН
🔴 Elementor Accordion Section | Elementor Tips and Tricks
10:28
ProWebMentor
Рет қаралды 11 М.
How to Make an Elementor Text "Read More" Expander with No Plugins
5:20
How to Add a Scrollbar to a Container | Elementor
3:58
Croco Mentor
Рет қаралды 3,1 М.
لااا! هذه البرتقالة مزعجة جدًا #قصير
00:15
One More Arabic
Рет қаралды 51 МЛН