Jonathan, I think this is relatively straightforward - off the top of my head all you need to do is create a button and link it to a section on the same page and it should then just scroll to that section. Make sure that the section you want to scroll to has a unique i.d. and ensure that is referenced by the button and you should be in business. Let me know if you have a problem and I’ll see if I can create and share it.
Hi Bartek, have you had a chance to look at this…
It would be great if you managed to work it out…
:-{ )
I’ll sit down to it tomorrow (evening probably), okay? 
1 Like
Hey, I’ve managed to do that in Webflow I’ll post the link to my sandbox where I’ll try to give and explain jQuery codes yu ask me for
1 Like
Hey Bartek, that’s fantastic. I’ll go through it tomorrow and see if I can get it to work for me - hopefully I wont need to bug you any more.
This is great, thanks! However, I have a question.
I have four buttons using your technique, and four divs. I doesn’t work well because it keeps toggling the divs randomly.
Is there a way i can remove the toggle function, and instead…just have a button fade in a div ?
Give each of those buttons additional class like awesome-button first, awesome-button second, awesome-button third, awesome-button fourth. Your script can then refer to them like
$('.awesome-button .first').click(function() { ... });
or you can give them a unique id by selecting them and going to settings panel. If you give them unique id you can easily refer to them in your script like this:
$('#awesome-contact-button').click(function() { ... });
Thanks, though i’m not sure how to remove the toggle function.
In progress site http://gbwedding.webflow.com - In the bottom of the site, you’ll see there buttons.
I have three buttons, and three div blocks ( absolute positioned & hidden )
The three buttons have ID of #the-map, #the-hotel, #the-restaurant
The Div block has ID of #the-mapbox, #the-hotelbox, #the-restaurantbox
The HIDE/UNHIDE works, but when I click on one button, and then another, and go back & fourth, it messes up. And, some reason the-restaurantbox doesn’t display for me yet.
This is the JQUERY I have for three buttons
$(document).ready(function() {
$('#the-map').click(function(e) {
e.preventDefault();
$('#the-mapbox').fadeToggle();
});
});
$(document).ready(function() {
$('#the-hotel').click(function(e) {
e.preventDefault();
$('#the-hotelbox').fadeToggle();
});
});
$(document).ready(function() {
$('#the-restaurant').click(function(e) {
e.preventDefault();
$('#the-restaurantbox').fadeToggle();
});
});
$(document).ready(function() {
$('#the-map').click(function(e) {
e.preventDefault();
$('#the-hodelbox').fadeOut();
$('#the-restaurantbox').fadeOut();
$('#the-mapbox').fadeIn();
});
$('#the-hotel').click(function(e) {
e.preventDefault();
$('#the-restaurantbox').fadeOut();
$('#the-mapbox').fadeOut();
$('#the-hodelbox').fadeIn();
});
$('#the-restaurant').click(function(e) {
e.preventDefault();
$('#the-hodelbox').fadeOut();
$('#the-mapbox').fadeOut();
$('#the-restaurantbox').fadeIn();
});
});
paste in in dashboard in before </body> section of Custom Code.
Btw, sweet design @liberrtines! You should post it on Show and Tell part of the forum when you’re done.
1 Like
Thanks! I’ll definitely do that for sure
This is great! Is it possible to replace fadeIn, fadeOut, with slideLeft?
Hey guys, while all this documentation is AWESOME. I can actually do a custom full-screen slide / drop-down just by customizing the nav-bar widget. I got some great results, I haven’t exported to test yet, but I don’t see how this could cause any issues. If this isn’t the best way let me know, I realize it’s somewhat of a “work-around”, but with some customization, it works really well.
Hi all,
Anyone know why the following code wouldn’t work as per the previous examples?
$(document).ready(function() {
$(‘#btn_web_01’).click(function(e) {
e.preventDefault();
$(‘#reveal_web_02’).fadeOut();
$(’#reveal_web_03’).fadeOut();
$(‘#reveal_web_01’).fadeIn();
});
$(‘#btn_web_02’).click(function(e) {
e.preventDefault();
$(’#reveal_web_01’).fadeOut();
$(‘#reveal_web_03’).fadeOut();
$(’#reveal_web_02’).fadeIn();
});
$(‘#btn_web_03’).click(function(e) {
e.preventDefault();
$(’#reveal_web_01’).fadeOut();
$(‘#reveal_web_02’).fadeOut();
$(’#reveal_web_03’).fadeIn();
});
});
Hi @JD89, do you have a public link to your site? We can look to see what the response is on the page, to see if there are any issues. From what I can see, there is no javascript error in your code, so I would check that your unique id’s are setup for each button (#btn_web_01) and that the id’s are set also for the reveal elements (#reveal_web_01, 02, 03 etc).
If you provide a link, we can look further for you, to give you some feedback on this.
Cheers!
That would be awesome if you could take a look!
Here is the public link:
https://webflow.com/design/jeremiedelbosc?preview=85e98deb32f7a38f6c204b670f757c45
Hi @JD89 , you have two issues in your custom code section. Fix these, and it it will work.
Issue #1:
You have put a reference to jQuery in your HEAD, you can remove this completely. Actually, remove all custom code from the HEAD section, the code you want to use should be placed in the Before Body panel of the Custom Code section. See screenshot:
Issue #2:
I first though you did not have a problem with your jquery code, but I can see you do have some issue, where you are using a single curly quote character in your statements like $('btn_web_01… this is causing the code to fail. The solution is to replace ALL your custom code in the Before Body section with the following code:
<script>
$(document).ready(function() {
$('#btn_web_01').click(function(e) {
e.preventDefault();
$('#reveal_web_02').fadeOut();
$('#reveal_web_03').fadeOut();
$('#reveal_web_01').fadeIn();
});
$('#btn_web_02').click(function(e) {
e.preventDefault();
$('#reveal_web_01').fadeOut();
$('#reveal_web_03').fadeOut();
$('#reveal_web_02').fadeIn();
});
$('#btn_web_03').click(function(e) {
e.preventDefault();
$('#reveal_web_01').fadeOut();
$('#reveal_web_02').fadeOut();
$('#reveal_web_03').fadeIn();
});
});
</script>
Once you update this, save and then publish your changes, and it should work. Let us know how it works out for you.
Cheers !
I tried deleting everything from the before </head> section and copy/pasting your code above into the before </body> section, but it still doesn’t appear to be doing anything.
@JD89, Hi, I checked your code, and it appears ok. If I look at the published site:
http://jeremiedelbosc.webflow.com/
and I click the buttons, it seems to work. Please check my quick screencast, and see the behaviour in action:
Let us know if any further issues or questions. Cheers !