â–Ľ
Streaming live at 10am (PST)

Hide/Unhide container or section upon button click


#1

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


Collapse.js Accordian Containers
#2

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?


#3

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…


#4

http://quick.as/grkspkr

You're welcome wink


#5

that looks great and will solve my problems. Will implement it a little later.
thanks a lot…


#6

@bartekkustra

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 =(


#7

Soo.... You need something like a lightbox that fits the screen of a browser, huh? stuck_out_tongue_winking_eye I'll try to post my latest code this evening wink Tell me exactly what you need and I'll try to help you wink


#8

@bartekkustra

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!


#9

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 wink


#10

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!


#11

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


#12

Write here what exactly do you have in <head>...</head> section in dashboard.


#13

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


#14

Publish your site and link it here, please.


#15

http://toggle.webflow.com/

Thanks for looking at this…


#16

Try changing to this:

$(document).ready(function() {
 $('a').click(function(e) {
  e.preventDefault();
  $('#page-nav-something-to-hide').toggle();
 });
});

#17

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


#18

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 wink


#19

Thanks bartek, yours seems to be the same as mine, with neither working, I look forward to your troubleshooting…
smiley


#20

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.