[ArtOfSpringParticipant]

Hi there,

I was looking for a solution to have an expanding section.

On my site: https://mybetterlife.de/#stimmen there some client voices.
Underneath the row with four columns should be a button (show more) that expands the section with another 4 column row.

I found this solution for hiding/showing entire sections:

Hide and show section on button click.

Is it also possible for rows?

Thank you!

[JoaoModerator]

Hi There,

It does work.

Add the following code to Cornerstoen Settings Custom Javascript:

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
       }, 700, 'swing');
 
    })
});

Add the class : section-expandable to your row.

Add the class: section-trigger to the button.

Hope it helps

Joao

[ArtOfSpringParticipant]

Thank you, that works perfect!

Is it also possible to hide/show multiple rows with that trigger button?

[RupokMember]

Hi there,

It should work if you use the same class for other Rows. Let’s try and let us know if that works.

Thanks!

[ArtOfSpringParticipant]

Hi Rupok,

thanks I’m gonna try this.

In the meantime i recognized that the expanding function doesn’t work mobile (testet with Android, Chrome).
The hidden row shows up from the beginning before the trigger button has been clicked.

Any idea how to fix this?

Thank you

[Nabeel AModerator]

Hi again,

Try replacing the previous code with the following code:

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

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[ArtOfSpringParticipant]

Hi Nabeel,

thank you so much, that worked!
To make it complete: will it work to have an on click function for the trigger button
to show different text (‘Show more’/’Show less’)?

Something like this?:

$('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore2');
    if($this.hasClass('SeeMore2')){
        $this.text('See More');         
    } else {
        $this.text('See Less');
    }
});

[ThaiModerator]

Please try with this code:

jQuery(document).ready(function($){
    $('.section-expandable').slideToggle(0);
    $('.section-trigger').on('click',function(e){
		e.preventDefault();

		$('.section-expandable').slideToggle('slow');
		$('html, body').animate({
			scrollTop: $(".section-expandable").offset().top
		}, 700, 'swing');

		$(this).toggleClass('seemore');

		if($(this).hasClass('seemore')){
			$(this).text('See More');
		} else {
			$(this).text('See Less');
		}
	});
});

Hope it helps 🙂

[ArtOfSpringParticipant]

Thank you, works perfect!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts