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?

On 5/22/2023 at 2:15 AM, tuanphan said:

Can you share link to your site?

@tuanphan
My desired need is similar in that it is for ALL the "Our People" or "Meet the Team" sections across my website, https://americanhealthcare.squarespace.com (password: ahctdc)....
I am starting here on this page https://americanhealthcare.squarespace.com/wise with one of the bottom sections with the "Our People" section in place, and I'd like to add a stroke or border around the circle images (see attached screenshot). 
I almost got it with what I have so far but I am having trouble getting the stroke to work for the CIRCLE:
/* OUTLINE TEAM GALLERIES */
.user-items-list-simple .list-item-media-inner[data-aspect-ratio="circle"] img{
   border: 4px solid red !important;
}

THANKS ahead of time for any help on this! 

47 minutes ago, thedowntowncreative said:

@tuanphan
My desired need is similar in that it is for ALL the "Our People" or "Meet the Team" sections across my website, https://americanhealthcare.squarespace.com (password: ahctdc)....
I am starting here on this page https://americanhealthcare.squarespace.com/wise with one of the bottom sections with the "Our People" section in place, and I'd like to add a stroke or border around the circle images (see attached screenshot). 
I almost got it with what I have so far but I am having trouble getting the stroke to work for the CIRCLE:
/* OUTLINE TEAM GALLERIES */
.user-items-list-simple .list-item-media-inner[data-aspect-ratio="circle"] img{
   border: 4px solid red !important;
}

THANKS ahead of time for any help on this! 

...And now 5 minutes later, I have the circle, but it seems to be a little bit offset, and also not exactly flush around the image (there's the smallest bit of space between the border and the image).
/* OUTLINE TEAM GALLERIES */
.user-items-list-simple .list-item-media-inner img{
  border: 4px solid red !important;
  border-radius: 50%;
}

furthermore, is it possible to make each of the images have a link?

On 8/10/2023 at 10:23 PM, thedowntowncreative said:

@tuanphan
My desired need is similar in that it is for ALL the "Our People" or "Meet the Team" sections across my website, https://americanhealthcare.squarespace.com (password: ahctdc)....
I am starting here on this page https://americanhealthcare.squarespace.com/wise with one of the bottom sections with the "Our People" section in place, and I'd like to add a stroke or border around the circle images (see attached screenshot). 
I almost got it with what I have so far but I am having trouble getting the stroke to work for the CIRCLE:
/* OUTLINE TEAM GALLERIES */
.user-items-list-simple .list-item-media-inner[data-aspect-ratio="circle"] img{
   border: 4px solid red !important;
}

THANKS ahead of time for any help on this! 

You mean: Clicking on team image >> show more info under team name?

If right, let me know, I will write a quick guide on how to do this, then you can apply easier for future case

On 8/12/2023 at 4:27 AM, tuanphan said:

You mean: Clicking on team image >> show more info under team name?

If right, let me know, I will write a quick guide on how to do this, then you can apply easier for future case

Click image >goes to> another page. Maybe one day we'll Lightbox it
Thanks!

On 8/15/2023 at 2:10 AM, thedowntowncreative said:

Click image >goes to> another page. Maybe one day we'll Lightbox it
Thanks!

You can enable items button, then use this CSS, this will turn button link to image link, then make buttons invisible

/* Staff List Clickable */
.user-items-list-item-container[data-section-id="64d3fe6c2058a0121e33ccf1"] {
	li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}}

If it doesn't work, please keep the buttons, then we can check it again easier