Docs

[DonWattz]

Looking to click the “Learn More” button under each person and have a section underneath appear. The sections should all be hidden at first then with each click, you can toggle them open or closed.

http://0ed.c42.myftpupload.com/about/our-team/

[John Ezra]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[DonWattz]

I have something like this but I am still having problems. Is there anything you all can help with?

$(document).ready(function(){
$("#kevin").toggle(function(){
$("#kevinRow").removeClass("hiddenrow");
});
});

[Rad]

Hi there,

I checked and it works as intended based on the code. Unless, it’s not something you wish to achieve. For example, like this,

jQuery ( function( $ ) {

$('.section-expandable').css({ display: 'none' });

$('.section-trigger').on( 'touchend  click', function( e ) {

e.preventDefault();

$('.section-expandable').css({ display: 'none' });

$( $(this).attr('href') ).toggle('show');

} );

} );

This assumes that your button is in this format

[button href="#kevin" class="section-trigger"]Kevin[/button]

What you did are unique buttons with unique jQuery coding for each, hence harder to maintain and harder to connect to other buttons. Hence, the toggle is independent of each other (eg. when you toggle off, other contents are still displayed).

Thanks!

[azzacoward]

Just found this post. Totally awesome answer guys! Really helped me achieve an effect I wanted.

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[uberphoto]

Hey — this is fantastic! Any note on how to close the section after opening?

I did the below based on your above post, but, while it works, I’m sure there’s a wayyyyy more elegant method of doing it. 😛

jQuery ( function( $ ) {

$('.section-collapse-trigger').on( 'touchend  click', function( e ) {

e.preventDefault();

$('.section-collapse').css({ display: 'block' });

$( $(this).attr('href') ).toggle('show');

} );

} );

[Nabeel A]

Hi again,

Thank you for writing in! Can you please share the page URL so we can take a look?

Thanks!

[uberphoto]

This reply has been marked as private.

[Paul R]

Hi,

Your code looks fine, kindly remove this line.

$(‘.section-collapse’).css({ display: ‘block’ });

eg.

jQuery ( function( $ ) {

$('.section-collapse-trigger').on( 'touchend  click', function( e ) {

e.preventDefault();

$( $(this).attr('href') ).toggle('show');

} );

} );

Thanks

[uberphoto]

Will do — thanks! Is there a way to make the expand button scroll to the section as well? And the collapse to scroll to the section just below it?

[Lely]

Hi There,

Please try updating the code to this:

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

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

Update other codes as well.

Hope this helps.

[uberphoto]

Thanks Lely — but doesn’t that remove the ability to have multiple sections without copying the code for every every ID?

[Joao]

Hi There,

IDs can be assigned just one time to one element, please try using class instead. A class can be assigned multiple times.

If you use class for your sections your code should look like this:

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

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

Let us know if it works for you.

Thanks

Joao

[uberphoto]

Thanks!

I’ve basically got it to my needs (I removed all reference of IDs). I have added a close button that triggers the same script positioned absolutely on the top right of the section that expands. It gets mostly obscured — is there an offset I can do to prevent it from being scrolled past?

Finally, when the button is clicked to collapse, is there a way to scroll to the top of the section immediately below? Because it scrolls past about 90px.

::EDIT::
I’ve tweaked it a bit but there is still a scroll. I think it is the sticky header, because it does not happen on mobile.

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

Oh! Any way to increase performance on mobile? Though it could just be choppy because I currently have a large, but relatively sized-down image in it… >> Definitely helped resizing the photo.

[Author]

Posts