Hi! Is there a way to hide or unhide a section/ container upon button click? i want to hide a specific section in a single page and then just showing it when i trigger button click
This requires some javascript, so you wonāt be able to do this using the Webflow interface yet. We do plan on adding this kind of trigger for links in the future.
Does anyone in the forum have any ideas on how to do this currently?
I have spent some time trying to solve this issue. I think it can be done, but not entirely within Webflow. I have a working sample, but this only works on desktops as it is activated on a hover trigger which tablets and phones ignore, when clicked the section opens but I canāt get it to close. On searching the net you can trick CSS into responding to a click event by using a pseudo :target event, but I havenāt been able to work out if can get Webflow to work around its limitations on this front.
I have been trying to implement a mega menu and have the framework set up, but canāt get it to respond properly, see:
https://webflow.com/design/calderstone2013branding?preview=059dbdece0e3da09ae5922dd8c77a78c
It works on a PC at the small sizes, but if viewed on a phone it does not. See http://dev.calderstone.com/branding
Does anyone have any ideas on this. The menu across the top opens on all devices, albeit with a few minor positioning bugs, but I canāt close it. I obviously set up the āCall Nowā form differently, because I canāt get that to work at all on phones, but again it works on a PC.
Any ideasā¦
that looks great and will solve my problems. Will implement it a little later.
thanks a lotā¦
Thank you so much for your video tutorial, but I still seem to be having a bit of trouble getting it to work. How would you go about integrating this so that one could click on a .jpg thumbnail and have a container showcasing other .jpgs appear?
I plan on using a site that Iām working on for my portfolio and your feedback would be greatly appreciated =)
I just canāt seem to get the hidden containers to appear =(
Sooā¦ You need something like a lightbox that fits the screen of a browser, huh? 
Iāll try to post my latest code this evening 
Tell me exactly what you need and Iāll try to help you
You are awesome!
Hereās an example of a site I found that does what my end goal is ā http://www.caramelbudgie.com/
If you scroll down a little bit to the projects section, once you click on a particular project thumbnail, the rest of the work is revealed (similar to your tutorial where your button revealed the hidden container).
My current site ā http://www.petereyrich.com/beta
I just want to know if thereās a way to integrate the same or a similar functionality into my projects section ( rather than having to link out to Behance or Dribbble).
Thanks so much!
Thatās just simple jQuery code that scroll to the section and then slideDown a section like in my screencast.
$(document).ready(function () {
var awesomecontent = "Turbo-lux";
$('#click-me').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function() {
window.location.hash = target;
});
}),
$('#awesome-project').html(awesomecontent),
$('#awesome-project').slideDown();
});
All you have to do is to change the awesomecontent content
I am trying to do something similar. I would like to have a ānextā button that is fixed at the bottom of the window that will scroll to the next section when clicked. I have been looking all over for an easy guide, what variables do I have to replace from your code pasted above? Thanks!
Hiya Bartek
Thanks for the screencast, I have followed and studied it but cannot get it to work.
Hereās a troubleshooting link,
https://webflow.com/design/toggle?preview=a2f6c506bbe3b4713a67f3b3812e8f2c
could you have a look and tell me where I have gone wrong. I have never coded javascript, so itās all new to me.
What I donāt understand from the screencast and the page I have created how the āclickā event knows what to do. There is a bit in the video that is a bit clunky just after the button has been created, maybe Iām missing somethingā¦
Any feedback gratefully received.
Thanks
Write here what exactly do you have in <head>...</head> section in dashboard.
`
`Publish your site and link it here, please.
Try changing to this:
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
$('#page-nav-something-to-hide').toggle();
});
});
Still not working. Can you publish a troubleshooting link of the file you created the video with and then I can inspect it and see whatās different in the file I have created.
Thanks
TS: https://webflow.com/design/bodyheight?preview=3a6a227f98641aadd34784f6a660a429
Site: http://bodyheight.webflow.com/
Script:
<script type="text/javascript" href="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('a').click(function() {
$('#page-nav-something-to-hide').toggle();
});
});
</script>
But for some reason I see that it doesnāt work now at my place tooā¦ Iāll try to fix it today and post it here
Thanks bartek, yours seems to be the same as mine, with neither working, I look forward to your troubleshootingā¦
Iām also trying to find a way of doing this. Full screen hero section, with a nav bar on top and and a button at the bottom that when clicked, would scroll to the next section.
Any help withy this would be greatly appreciated.