You're welcome! Thanks for the feedback.

Thank you for your feedback! I'm really happy to hear that the tutorial worked well for you.

brandoope im happy it works for you, regarding the jump i forgot to do it in the video, added in the video decription

Where and how do we upload the template?

my pleasure, I'm glad you liked it

@ElementoryMyDearWatson glad you liked it

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!

i'm making a tutorial for you coming soon

@@crocomentor you are the best!!!!

kzfaq.info/get/bejne/m7CpjbGcnLjUoJs.html

this

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

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!

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

select the button, in the content tab go to the link field and delete the hashtag prnt.sc/nuyjSP2tdR7R

I would also like to know this

hey, countbang made a video for you click this link filenewcreate.com/countbang

@@crocomentor Thanks so much!!!

download and use my template filenewcreate.com/unfold-template/

I downloaded as a zipfile....and what to do then with it?@@crocomentor

prnt.sc/9z-DCxD4HGvr

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

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'm sorry to hear that download my unfold templates from the video filenewcreate.com/unfold-template/

filenewcreate.com/elementor-21164/

@@crocomentor Very helpful. Thanks so much.

I checked, and unfortunately, it doesn't.

i fixed it, go get the new code , it should work now

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.

it should work follow my exact steps dont skip anything

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/