So glad to hear it worked for you :)

Hello Caro, I also want to implement the same feature you are telling about. Can you please help me with the code? It will very helpful.

@@ashishkumarmishra7412 If Caro doesn't answer you, I may share the solution that I implemented, doing some minor additions to the shared code

Wow, thank you!

Awesome

Hi, the code hasn't changed. Have you got any menu anchors?

same Problem

Great to hear!

Nevermind- got it! For those wondering: just remove the following from the style. section: .showclick2{ display: none; }

You're welcome 😊

Not so well there unless you carefully plan out the buttons. I’ll do an update on this soon.

Let me check

Have you tried reaching out to the Code's Developer?

Best to check with the Code Developer, or put the code into ChatGPT and ask it to rewrite.

You're welcome 😊

Maybe with entrance animation… maybe…

Let me have a think about that, as it needs to alternate.

Sure, that is something we're trying to figure out. Some Transition could be added,, maybe.... transition: 0.5s ease-in-out;

Have you seen my updated version of this video

That will require a little more effort and it may be better to use a toggle button instead?

The icons could be positioned side by side for sure, but then getting another icon to replace the previous is the bit that an experienced HTML expert could advise more. The code wouldn't need changing at all. All you need is for Icon 2 to hve a higher z-index than Icon 1 after clicking, and then for it to alternate between 1 and 2 each time there is a click.

Are you applying the exact same code?

It shouldn't disappear that's for sure. Care to share the URL for the Page for the Popup?

me too

Have you tried to set them with custom width?

I’m still trying to get a better way to modify the transition speed

Let me check

@@websquadron I have the same issue. Were you able to come up with a solution? Otherwise this code works perfectly and does what I've been trying to find in a while. Thanks!

@@parity6099 I'm checking with the original coder

Hello ! I found the problem ! The HTML was not the source of this. It's was the button itself ! Edit the button and go to it's "URL link" --> It has a "#" written in it ---> And this is the source of this evil scroll up :D

@@parity6099 I found the solution... in the box of the button you are programming, there is a box where it says "link to", in there, is the "#" simbol by default.... The solution is to make it like this "#/" and there you go.... no more jumping around.

See this alternate version: kzfaq.info/get/bejne/p8-fost1rLbWnok.html

I'll double check.

@@websquadron Wow, thanks so much for the quick response. That'd be great so we don't have to type everything manually from the end of your video.

You may need to contact the original code developer - see the link - as I wonder if the code needs to be tweaked.

@@websquadron Hi!.. Thanks for answering so soon... I figure out what was the issue. kind of silly, but it turns out that, because they are "buttons", and I didn't assign any link (in the "link to" box") they had the "#" sign by default in them, and because of that, it was sending the page back to the top everytime I clic. The solution for that was, to modify the "link form "#" to "#/", and now it works great, plus it looks fantastic. Once again, thanks for the video. I also want to thank you for the sample themes after me subscribing to your web, they are very interesting.

Yup, it does hide. Let me check with the code developer.

@@websquadron yes please. I need this.

There’s a link in the video description to element.how

Glad you enjoyed it

I suppose yes if the Loop Grid or Posts' query is set to be a certain category based on the 'click' bit.

Not sure about that unless some extra JS was applied

Thanks for the sub!

That is beyond me, so I'll ask a colleague who came up with the code.

@@websquadron thank you very much I and I really appreciate it, I hope you can help me in finding the solution. 😀🙏

@@developertesting5534 An alternative way is to make a Section appear as you scroll. Use the Scrolling Effect > Transparency. No code is required. See this video: kzfaq.info/get/bejne/qbKHlZuHqdbHZn0.html In that video, I have applied to the images, but you could apply it to anything that you want.

@@developertesting5534 And you have Scroll Snap too: kzfaq.info/get/bejne/ftmXkrRk0aqxeYE.html

@@websquadron Is it possible?, because the problem is that i disabled scroll function in my project so that the page can't be scrolled. Therefore, I am looking for a solution to trigger the appearance of the section with a swipe up or swipe down touch.

Not sure about swipe sorry. Maybe try to make it work with column hover instead?

@@websquadron oke thankyou 😀👍

The solution I found works well with a button.

As long as you apply it that way, it will work. But to be fair, this is only one way of doing it, and there will be other methods using code.

You're welcome

A good point.

@@websquadron How to do it? 🤔

@@juliancastaneda8775 so you mean to make it slide up and down?

@@websquadron Yes, smoothly.

Did you apply the code as it should be. PS - you may need to check on the original site where the code came from. I know it works fine for me.

Is there any way that we can have it ease out when you click the button? ATM the transition is quite harsh when you click the "show button". TIA

Go to the Link, and then copy and paste it :)

Best to contact the original code developer

@@websquadron I figured it out. However, not sure if you cn help with this one. I have three buttons and threes sections. They all show up when I click each other buttons just fine. How can I make the other 2 disappear when I click on one of the buttons. Basically only want one to show at a time.

@@Kelphaz I didn’t. I just found a way to only use a single button.

I need to think about that.

@@websquadron That would be awesome if possible, to hide all sections with a certain product and depending on what they choose from a dropdown menu will depend on which section/product is displayed! Cheers mate.

I may find a better solution for this soon

@@websquadron yes please 😔 thankyou so much 😁😁

That would require more JS to be added to the script.

@@websquadron can you make a video about that pls❤️

If you still have the doubt on how to perform that action, I can show you what we did, emulating a Filter Menu, with 6 sections being toggled and just showing at least 01 section at a time, or letting the user to select more than one section and the other not selected being hidden. Even We understood so well the explanation in the video, that we cloned the clickable section, and one of the clickable section had a squared, and the other section had a square with a check, and being toggled both of the, one disappeared showing the section content and the other hidding the section content.👍👍👍

Hi - did you follow the code and enter the correct classes for the buttons and the sections? The code works if you follow the steps. Email me on info@websquadron.co.uk if unsure

@@websquadron yes. It went to the top page each time I click the button and the section didn’t appear

@@khairulanuar4452 It’s probably because you still have # showing as the link for the button. Click the button and go to the content tabard remove the # in the Link setting

Hi It’s in the video description. element.how/elementor-show-section-on-click/

@@websquadron Thanks for your response. I followed the steps from the video and could replicate and understand it. Besides being useful, your videos are entertaining. Thank you for your work!

You just need a Google Account.

Hi Dany. I need to reinvestigate this solution as this has been reported a few times.

Maxime owns the code so I’ve got to keep it linked :) Hope it does enough for you.

Try this - line 7 must be .show(); this will prevent the button from disappearing after clicking document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.clicktoshow').each(function(i){ $(this).click(function(){ $('.showclick').eq(i).toggle(); $('.clicktoshow').eq(i).show(); }); }); }); }); .clicktoshow{ cursor: pointer; } .showclick{ display: none; }

:)

@@websquadron I think I need help, ussually once I press the button suddenly the webpage went to the header section. And the section did appear but the button dissapear even if I use .toggle(),,

@@edberaga Are you using the same code? We could offer 1-2-1 support, but we do charge for that. Email on info@websquadron.co.uk

Not sure about that

I'm not sure about how to do that

@@websquadron ok fine

The link is the description.

There is a link to the code in the description

Can still work as it’s based on sections

Many thanks. Due to the high number of daily requests, I don’t investigate or propose possible solutions unless they're a 1-2-1 consultation. If you're still interested, visit my booking page: learn.websquadron.co.uk/#support

Sorry? No need to login to my website?

Hi John :) It should be in the comments. I’ll email it to you if it’s not showing for some reason.

Hi Imran, You are correct, it is showing in the comments. For some reason, one of the sort filters was obscuring it from my view. But, I do see it now!

@@johnboyd8053 :)

That may require some JS writing. Best to get an expert coder.

I’ll have a think about that. Slightly difficult because it’s already loaded

I will be waiting for the next video on this topic 😉

@@hassanjaved1147 @Web Squadron I got this easing animation to work... wherever "toggle" appears in code: .toggle('trans') add to .trans { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

@@brianwoodlief Thank you for this ! It's not working for me, it's not moving. Just to know if i did it right, i put .toglle('trans')() in the code and on the bottom, before /style i add .trans { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } this is it ?

The link is in the video description.

Soon. Working on a solution for it.

It was in the comments :) Here you go: Code :) document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.clicktoshow').each(function(i){ $(this).click(function(){ $('.showclick').eq(i).toggle(); $('.clicktoshow'); }); }); }); }); .clicktoshow{ cursor: pointer; } .showclick{ display: none; } ------ The above is fine on it's own, but below can go a step further. document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.clicktoshow2').each(function(i){ $(this).click(function(){ $('.showclick2').eq(i).toggle(); $('.showclick3').eq(i).hide(); }); }); }); }); .clicktoshow2{ cursor: pointer; } .showclick2{ display: none; } document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.clicktoshow3').each(function(i){ $(this).click(function(){ $('.showclick3').eq(i).toggle(); $('.showclick2').eq(i).hide(); }); }); }); }); .clicktoshow3{ cursor: pointer; } .showclick3{ display: none; }

I have an updated version: kzfaq.info/get/bejne/etmhZN2K0a6rho0.html

Click the link in the description and then use Google to access

Thanks

I've replied to you email. Difficult to clarify without knowing how the site is built.

Was the code entered correctly and did you watch without skipping?

Yup

I wish :) Code free would require a plug-in.