Jump to content

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

Recommended Posts

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. 

CA1.png

CA2.png

CA3.png

Link to comment
  • 5 months later...
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. 

CA1.png

CA2.png

CA3.png

 

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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!! 

image.thumb.png.21fa8c6b5acdcc192061ef8d6724678c.png

 

Link to comment
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!! 

image.thumb.png.21fa8c6b5acdcc192061ef8d6724678c.png

 

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

Pass: abc

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.