Can anyone help me create a responsive and expandable "Our People" section?

Hi all,

I am trying to make a "Our Team" section.  I need it to be clean and simple, so just 4 headshots, 1-2 sentences below each, and a "read more" or button to expand.  Upon expansion, I'd like a new section to appear (not in a new window/tab) with the full bio of the person who was clicked.  

The first screenshot is a great example of what I want, but I need the unselected pictures to be greyed out, or something to indicate which name belongs to whom.  

Second screenshot would also be acceptable.

3rd screenshot is the sketch I made when first imagining this section.  It is my favorite example, but I understand it might be too custom to come to reality for this small project.

I'm using 7.1.

Thanks in advance for your help or for pointing me to some code I can copy/paste for this effect. 

Hi,

Have you tried Accordion Block to do this yet?

On 3/2/2022 at 2:48 PM, tuanphan said:

Hi,

Have you tried Accordion Block to do this yet?

On 2/27/2022 at 5:15 PM, WRG34 said:

Hi all,

I am trying to make a "Our Team" section.  I need it to be clean and simple, so just 4 headshots, 1-2 sentences below each, and a "read more" or button to expand.  Upon expansion, I'd like a new section to appear (not in a new window/tab) with the full bio of the person who was clicked.  

The first screenshot is a great example of what I want, but I need the unselected pictures to be greyed out, or something to indicate which name belongs to whom.  

Second screenshot would also be acceptable.

3rd screenshot is the sketch I made when first imagining this section.  It is my favorite example, but I understand it might be too custom to come to reality for this small project.

I'm using 7.1.

Thanks in advance for your help or for pointing me to some code I can copy/paste for this effect. 

I have this same question -- @tuanphan accordion definitely works, but in this case I am hoping to use the 7.1 "list" feature so that I can have it in a grid on desktop, and carousel on mobile (using previous code you actually helped me with).

I am wondering if it is possible to use javascript to make the list "bio" section only expand when the "title" is clicked?

Website here, pw "zest"

Thank you!

On 8/26/2022 at 12:18 AM, MayaViolet said:

 

 

I have this same question -- @tuanphan accordion definitely works, but in this case I am hoping to use the 7.1 "list" feature so that I can have it in a grid on desktop, and carousel on mobile (using previous code you actually helped me with).

 

I am wondering if it is possible to use javascript to make the list "bio" section only expand when the "title" is clicked?

 

Website here, pw "zest"

Thank you!

Like this? https://thung.squarespace.com/list-section-accordion?noredirect

Pass: abc

10 hours ago, tuanphan said:

Like this? https://thung.squarespace.com/list-section-accordion?noredirect

Pass: abc

Yes, exactly! 

But then setting it's style to be "carousel," and then using code you had previously provided so that on desktop it shows up in a grid, and in mobile reverts to carousel.

On 8/28/2022 at 2:42 AM, MayaViolet said:

Yes, exactly! 

But then setting it's style to be "carousel," and then using code you had previously provided so that on desktop it shows up in a grid, and in mobile reverts to carousel.

Add this code to Page Header (page where you use List)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('li.list-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.list-item-media:hover, h2.list-item-content__title:hover {
    cursor: pointer;
}
  .list-item-content__description {
    height: 0;
    overflow: hidden;
    transition: all 0.1s ease;
}
  .tp-list-des-open .list-item-content__description {
    height: 100%;
    transition: all 0.1s ease;
}
</style>

On 8/28/2022 at 11:58 PM, tuanphan said:

Add this code to Page Header (page where you use List)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('li.list-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.list-item-media:hover, h2.list-item-content__title:hover {
    cursor: pointer;
}
  .list-item-content__description {
    height: 0;
    overflow: hidden;
    transition: all 0.1s ease;
}
  .tp-list-des-open .list-item-content__description {
    height: 100%;
    transition: all 0.1s ease;
}
</style>

 

Thank you @tuanphan! You are a CSS angel, as always!

On 8/28/2022 at 11:58 PM, tuanphan said:

Add this code to Page Header (page where you use List)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('li.list-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.list-item-media:hover, h2.list-item-content__title:hover {
    cursor: pointer;
}
  .list-item-content__description {
    height: 0;
    overflow: hidden;
    transition: all 0.1s ease;
}
  .tp-list-des-open .list-item-content__description {
    height: 100%;
    transition: all 0.1s ease;
}
</style>

 

Hi @tuanphan - one more question. This javascript seems to not want to apply  the new class to li.list-item when clicked in mobile. Any thoughts?

Thank you!

On 8/30/2022 at 4:59 PM, MayaViolet said:

Hi @tuanphan - one more question. This javascript seems to not want to apply  the new class to li.list-item when clicked in mobile. Any thoughts?

 

Thank you!

Hi @tuanphan - me again 🙃 any thoughts about making this work on mobile? TIA!

SQS Mods also have a plugin that does just this. It allows you to create a button with any text that opens the copy. I've implemented it on projects and it works really well.

https://www.sqsmods.com/list-expand

On 9/2/2022 at 7:18 AM, MayaViolet said:

Hi @tuanphan - me again 🙃 any thoughts about making this work on mobile? TIA!

Can you share link to page where you added list? I Can check easier

On 9/2/2022 at 5:53 PM, tuanphan said:

Can you share link to page where you added list? I Can check easier

@tuanphan Yep -- Website here, pw "zest"

Thank you!

On 8/31/2022 at 6:59 AM, MayaViolet said:

Hi @tuanphan - one more question. This javascript seems to not want to apply  the new class to li.list-item when clicked in mobile. Any thoughts?

 

Thank you!

Add this under above code

<style>
  @media screen and (max-width:991px) {
  .user-items-list-item-container[data-section-id="6306cbfd033a0b025c74afa3"] li {
    user-select: auto !important;
    pointer-events: initial !important;
}
  }
</style>

8 hours ago, tuanphan said:

Add this under above code

<style>
  @media screen and (max-width:991px) {
  .user-items-list-item-container[data-section-id="6306cbfd033a0b025c74afa3"] li {
    user-select: auto !important;
    pointer-events: initial !important;
}
  }
</style>

 

Amazing, thank you!

Hey @tuanphan could you change the code so a dropdown could be applied to the description in a summary block?  Thanks so much! 🙂

On 11/2/2022 at 8:41 AM, melaniejaane said:

Hey @tuanphan could you change the code so a dropdown could be applied to the description in a summary block?  Thanks so much! 🙂

If Summary, click Title >> Show description, or click a text >> show description or?

On 11/4/2022 at 8:54 PM, tuanphan said:

If Summary, click Title >> Show description, or click a text >> show description or?

Hey @tuanphan I like how it's been done on the website listed above, how it has a +/- icon added in. I was thinking an ellipsis to avoid the animation change but if +/- is just as easy, it may be more obvious for user. Below is a quick mockup to show the elements I would ideally like visible vs hidden.

I posted last week as a seperate discussion (shared below) will tag you with links to website.

Thanks so much again!! 

22 hours ago, melaniejaane said:

Hey @tuanphan I like how it's been done on the website listed above, how it has a +/- icon added in. I was thinking an ellipsis to avoid the animation change but if +/- is just as easy, it may be more obvious for user. Below is a quick mockup to show the elements I would ideally like visible vs hidden.

I posted last week as a seperate discussion (shared below) will tag you with links to website.

Thanks so much again!! 

 

Just did a quick demo. You can check: https://thung.squarespace.com/summary-read-more?noredirect

Pass: abc

On 9/6/2022 at 2:32 AM, tuanphan said:

Add this under above code

<style>
  @media screen and (max-width:991px) {
  .user-items-list-item-container[data-section-id="6306cbfd033a0b025c74afa3"] li {
    user-select: auto !important;
    pointer-events: initial !important;
}
  }
</style>

 

@tuanphan This looks awesome. Is there anyway to get a similar solution for Squarespace 7.0? One of my company's sites is still running on the older interface and looking to do something similar to this expandable photo experience where bio text is hidden in a collapsible menu. Thank you.

On 5/18/2023 at 11:31 PM, kpearcey said:

@tuanphan This looks awesome. Is there anyway to get a similar solution for Squarespace 7.0? One of my company's sites is still running on the older interface and looking to do something similar to this expandable photo experience where bio text is hidden in a collapsible menu. Thank you.

Can you share link to your site?