Show/hide sections with button, adjust anchor point, start one section open

I read this thread

and have used the following code to make sections show when a button is clicked:

jQuery(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().top50
   }, 700, 'swing');

      });
    });
  });
});

Here is my page:
http://79.170.40.178/gridsmart.co.uk/

I have 3 expandable sections working.

There are three problems/questions I have:

  1. I would like the anchor position to stay the same, on the section that is always visible where the button is, then the lower part to appear or hide when button is pressed. At the moment it scrolls to the start of the newly visible section so you cannot see the show/hide button any more. Can you help with this?

  2. I would like the first section to show expanded to start with, can this happen?

  3. Ideally I would like the button to say ‘Show more’ when the lower section is hidden and ‘show less’ when the lower section is visible - is this too much to ask??? Would be great.

Thank you!!

Hi There,

You should remove the animate part, it will scroll to the target section.

This code will show your first section when the page loads:

$('#capability').show();

Please set the text of the button is Show More by default then add this code to your custom code:

if( $(this).text() == 'Show More'){
     $(this).text('Show Less');
} else {
     $(this).text('Show More');
}

So the final code should be:

jQuery(function($){
  $(document).ready(function($){
    $('.button-trigger').each(function(index){
      var section = $( $(this).attr('href') );
      section.slideToggle(0);
      $('#capability').show();
      $(this).on('touchend click',function(e){
        e.preventDefault();
        if( $(this).text() == 'Show More'){
          $(this).text('Show Less');
        } else {
          $(this).text('Show More');
        }
        section.slideToggle('slow');
      });
    });
  });
});

Hope that helps and thank you for understanding.

Thank you for your reply. This is great.

With 1), I want the anchor to land higher so that the show/hide button is still in view. Is this possible?

Thanks
Tamsin

Also, with the button. The styling of the button is wiped out after it is clicked and replaced with ‘show less’ etc.

You can see this live on the page.

Before clicking the button has 3 span levels inside it adding padding etc, after clicking it has no spans inside which makes it hard to edit the look of one with css without affecting the other.

Is there a way to carry the styling over or add a class just to the button that shows after clicking?

Thank you.

Update: I have managed to fiddle the css by taking the style out of the button and adding it in css to apply to before and after the button.

I still have two outstanding issues:

  1. I would like to stop the page from scrolling to the section when the button is clicked, it can just stay still.

  2. The first section show more/less buttons work but the following sections are showing ‘more’ and ‘less’ the wrong way around. Perhaps because of the first section starting open??

I hope you can help with these last points as this has been really helpful code.

Thank you

Hey Tamsin,

Regretfully, we already have went way above and beyond the scope of support here. The custom code @thai showed you was meant to be a starting point only. To continue the custom development, you will need to consult with a third party developer.

Thank you for understanding.

I totally understand about the additional custom coding. It was helpful to get a start on it.

In case it helps anyone, here is the solution I have now.

jQuery(function($){
  $(document).ready(function($){
    $('.button-trigger').each(function(index){
      var section = $( $(this).attr('href') );
      section.slideToggle(0);
      $('#capability').show();
    });
    $('.button-trigger').on('click',function(e){
        e.preventDefault();
        e.stopPropagation();
      	var section = $( $(this).attr('href') );
        if( section.is(":hidden")){
          $(e.target).text('Show Less');
        } else {
          $(e.target).text('Show More');
        }
        section.slideToggle('slow');
      });
  });
});

Thanks for sharing :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.