[LelyModerator]

Hi There,

Please try updating the code to this:

jQuery(document).ready(function($){

   $('.section-expandable').slideToggle(0);
    $('.section-trigger').on('touchend click',function(e){
       e.preventDefault();
       $('.section-expandable').slideToggle('slow')
       $('html, body').animate({
           scrollTop: $(".section-expandable").offset().top-90
       }, 700, 'swing');
 
    });
});

I have updated this line: scrollTop: $(".section-expandable").offset().top-90

Hope this helps.

[uberphotoParticipant]

Worked perfectly, thanks!

I updated the offset to -60 to match my new settings and tinkered with @media queries to make sure everything works fine on mobile (I added a .below-collapsed to the section underneath (to max-width 767px) and a margin-top:-60px to that class to compensate for the lack of a sticky menu in mobile).

Thanks again!

[JoaoModerator]

Great to hear it.

Let us know if you need help with anything else.

Joao

[uberphotoParticipant]

This has been working great, so far — but how can I tweak it so that it will allow multiple hidden sections that will open based on their ID, but without multiple JS entries?

[Paul RModerator]

Hi,

The js code uses class so you can simply add the classes(section-expandable & section-trigger) to the corresponding buttons and section.

No need to add another js entry.

Thanks

[uberphotoParticipant]

Right, I understand that, but so far, when I add more than one expandable section on a page, buttons/links will open and close all of them at once. Am I right in thinking that they should correspond to the ID of the section and the #ID-REFERENCE in the link URL? Because that’s not working, thus far.

[JoaoModerator]

Hi There,

The code above uses CLASSES not IDs

So you should use Classes instead of IDs.

As mentioned before.

I am not sure what you are trying to achieve, maybe you could explain with more details. Just have in Mind IDs are unique. So it is impossible to assign the same ID to multiple sections on the same page.

Let us know more details

Joao

[uberphotoParticipant]

I’m aware of the difference between CLASSES and IDs, Joao. I’m using classes. Specifically the classes .section-expandable and .section-trigger.

That’s all well and good for creating multiple sections that are hidden and open on a click. Fantastic, even.

What I don’t know is how to create a separate trigger for each hidden section without copying the JS code and replacing the CLASS.

Perhaps you could illuminate me? I’m sure it’s something obvious that I missed.

[LelyModerator]

Hi There,

Please try this code:

jQuery(document).ready(function($){

   $('.section-expandable').slideToggle(0);
    $('.section-trigger').on('touchend click',function(e){
       e.preventDefault();
       $('.section-expandable, #.section-expandable-id1, #.section-expandable-id2').slideToggle('slow')
       $('html, body').animate({
           scrollTop: $(".section-expandable").offset().top-90
       }, 700, 'swing');
 
    });
});

When section-trigger is click, it will open section with class section-expandable and section with ID .section-expandable-id1 and id section-expandable-id2. Just use comma to add more. Hope this helps.

[uberphotoParticipant]

Thanks Lely — I think there is some confusion, though.

It’s not having multiple sections that is the issue. That’s pretty straightforward. It’s having separate triggers open separate sections without multiple incidences of the JS code.

What I need, and I apologize, if what you did here was supposed to do that (I couldn’t make it work), is to tie the trigger to the individual section it needs to open. I assumed that the class would allow for multiple calls of hide/expand, but the ID would need to be married to the trigger, as well, in order to open a specific one. Much like opening/closing specific accordion items.

How would this be accomplished?

[Rue NelModerator]

Hello There,

Thank you for your clarifications. You can make use of the ID by adding one in your button trigger as button-trigger and also an ID for the section like expand-me. And then you can make use of this JS code:

jQuery(document).ready(function($){

   $('#expand-me').slideToggle(0);
    $('#button-trigger').on('touchend click',function(e){
       e.preventDefault();
       $('#expand-me').slideToggle('slow')
       $('html, body').animate({
           scrollTop: $("#expand-me").offset().top-90
       }, 700, 'swing');
 
    });
});

Please let us know if this works out for you.

[uberphotoParticipant]

Thanks for that — but I’m confused… isn’t that exactly the same as using the original class code? Wouldn’t I need to have that code repeated for each expandable section on the page? Shouldn’t there be some variable in there in order to make it work? Get element by class or by id or something? I’m not a JS guy, so you tell me if I’m way off base.

[Rue NelModerator]

Hello There,

If you want something simpler, then you can make use of this code:

(function($)){
  $(document).ready(function($){
    $('.button-trigger').each(function(index){
      var section = $(this).attr('href');
      section.slideToggle(0);

      $(this).on('touchend click',function(e){
       e.preventDefault();
       section.slideToggle('slow')
       $('html, body').animate({
           scrollTop: section.offset().top-90
       }, 700, 'swing');
 
      });
    });
  });
})(jQuery);

In order to use this, simply add a button button-trigger class to each of your button that will trigger to hide/show the section. The href of the button will indicate which of the section you will hide or show. So for example using the code above, if you want to hide/show expand-me section, all you have to do is to add a button-trigger class and add #expand-me in your button element.

Hope this make sense.

[uberphotoParticipant]

Hi Rue Nel — that idea is definitely what I’m after. Unfortunately, the code does not work. It’s throwing errors, which I tried to correct to varying degrees of success, but all avenues lead to the same result, so far.

[RadModerator]

Hi there,

What error you’re having? I checked and I think it’s removed.

For the meantime, from the above code, please replace this line,

var section = $(this).attr('href');

with this one,

var section = $( $(this).attr('href') );

Thanks!

[Author]

Posts