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:
-
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?
-
I would like the first section to show expanded to start with, can this happen?
-
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!!