0

I have a very difficult client that is demanding that a jquery toggle closes when a user scrolls down the page, rather than automatically staying open / closing when a user collapses it...

would that be possible? My jquery is pretty simple...

$(document).ready(function() {
  $('.nav-toggle2').click(function() {
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');
    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function() {
      if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
        toggle_switch.html('Contact Us');
      } else {
        //change the button label to be 'Hide'
        toggle_switch.html('Contact Us <');
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tag href="#contactus" class="nav-toggle2">Contact Us &lt;</tag>
<div id="contactus">some content that hides/shows here</div>

I can get around in jquery but am a little naive when it somes to integrating new effects into it.... would it be possible to have toggle_switch.html on scroll so when a user gets maybe 1/3 the page down, it hides?

Prashant Pokhriyal
  • 3,727
  • 4
  • 28
  • 40
Mixmastermiike
  • 449
  • 1
  • 5
  • 16
  • Ignore the duplicate flag. Pick an element that when scrolled to you want the toggle to close and then I would look at [this](http://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery) answer. – Steven B. Jan 24 '17 at 20:27
  • have you tried listening to the scroll event of the page and call toggle(false) when onScroll? – blenzcoffee Jan 24 '17 at 20:27
  • hmm I have not @blenzcoffee, that might be a good idea... can you possibly provide a link / example to that? I've done something kind of like that with sticky headers like on this site: mcadamsplumbing.com but I don't know how I could get something like that to "talk" with the .navtoggle2 function? – Mixmastermiike Jan 24 '17 at 20:48
  • @Mixmastermiike I post a sample code. It's not tested so you may need to tweak it, but that will be a good starting point how to talk to navtoggle2. You may want to check the link posted by lamelemon – blenzcoffee Jan 24 '17 at 20:54
  • @Mixmastermiike does it work? – blenzcoffee Jan 27 '17 at 16:15
  • hmm sorry that didn't work - thanks for the suggestion though. I'll post the code I used, I might have messed it up – Mixmastermiike Feb 12 '17 at 16:52

1 Answers1

0

Based on your comments you said you haven't tried listening to the scroll event. Can you try that? It will be something like this (code not tested):

  $(window).on("scroll", function(){
        // you can replace this with your hiding toggle logic 
        $('.nav-toggle2').toggle('false');
  });

You may want to unbind the event from the window later to avoid memory leak. Reference about scroll: Jquery scroll api

blenzcoffee
  • 851
  • 1
  • 11
  • 35
  • so basically put that script above all the jquery stuff? $(window).on("scroll", function(){ // you can replace this with your hiding toggle logic $('.nav-toggle2').toggle('false'); }); – Mixmastermiike Feb 12 '17 at 17:23