Make button (read bio) in people / list section link to either a lightbox text or a dropdown text

Hi there!
I have a team section using simple list and would like to have the button on each team member open full bio without leaving the page. Either as a dropdown or lightbox text. It seems that the button by default can only link to a page, website, file etc.

Any help on this is greatly appreciated!

Hi,

How about this? I helped a member recently.

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

Pass: abc

Before

After clicking title/image

Thank you @tuanphan – that's  good solution. Even better if some of the bio is visible and the rest expands on a Read more-link or button. Do you have a code for this?

On 5/21/2022 at 1:51 PM, martelil said:

Thank you @tuanphan – that's  good solution. Even better if some of the bio is visible and the rest expands on a Read more-link or button. Do you have a code for this?

Like this?

Add a List Section > Paste this code into Page Header

<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;
}
  h2.list-item-content__title:after {
    content: "Read Bio";
    display: block;
    font-size: 14px;
    font-style: italic;
    margin-top: 20px;
}
  .tp-list-des-open h2.list-item-content__title:after {opacity:0;}
</style>

Wonderful, thanks so much – this works great!

I've managed to simulate an accordion block by replacing "Read bio" with a plus character. Is there a way to add a line beneath the name / + in order to make it even more like an accordian? And is it possible to make the + not disappear on click but turn 45 degrees?

– But what I just realised is that all lists get the same "read bio" or + … even slideshows. Is there a way to have the code apply to only the specific list?

This is the modified code:

h2.list-item-content__title:after {
    content: "+";
    display: flex;
    justify-content: right;
    font-size: 40px;
    font-style: none;
    margin-top: -25px;
}

16 hours ago, martelil said:

Wonderful, thanks so much – this works great!

I've managed to simulate an accordion block by replacing "Read bio" with a plus character. Is there a way to add a line beneath the name / + in order to make it even more like an accordian? And is it possible to make the + not disappear on click but turn 45 degrees?

– But what I just realised is that all lists get the same "read bio" or + … even slideshows. Is there a way to have the code apply to only the specific list?

 

This is the modified code:

h2.list-item-content__title:after {
    content: "+";
    display: flex;
    justify-content: right;
    font-size: 40px;
    font-style: none;
    margin-top: -25px;
}

Can you share link to page where you added the code? We can tweak it easier

Thanks, but how do I share when the site is not published?

21 hours ago, martelil said:

Thanks, but how do I share when the site is not published?

Just setup password & share url

Hey, was just looking at this. Would it be possible to do something similar but on a team list?

On 11/1/2022 at 12:51 AM, LeonXDavis said:

Hey, was just looking at this. Would it be possible to do something similar but on a team list?

Can you share link to page where you use Team List? We can imagine easier.

This whole thread saved me hours! Thank you @tuanphan!  I was wondering if there is a simple way to add "close bio" or "read less" as an alternative to clicking on a blank space to close the bio content?

On 11/16/2022 at 4:57 AM, sarfaw said:

This whole thread saved me hours! Thank you @tuanphan!  I was wondering if there is a simple way to add "close bio" or "read less" as an alternative to clicking on a blank space to close the bio content?

You mean

Initial: show read more/open bio

Click on it >> Show text above read more/open bio, then read more/open bio text change to close bio/read less

Click close bio/read less >> hide text + change text to open bio/read more

Is this right?

You will use List Section, is that right?

yes that is exactly what I meant, thank you! And yes, with a List section.

On 11/26/2022 at 4:17 AM, sarfaw said:

yes that is exactly what I meant, thank you! And yes, with a List section.

Hi,

I did a quick demo. You can check: https://thung.squarespace.com/list-section-readmore-readless?noredirect

Pass: abc

@tuanphan that is exactly what I was envisioning 🙂

On 12/1/2022 at 6:09 AM, sarfaw said:

@tuanphan that is exactly what I was envisioning 🙂

First, add a List Section

Next, add this code to Page Header (page where you use List Section)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.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;
}
  h2.list-item-content__title:after {
    content: "Read Bio";
    display: block;
    font-size: 14px;
    font-style: italic;
    margin-top: 20px;
}
  .tp-list-des-open h2.list-item-content__title:after {
    content: "Read Less" !important;
}
</style>

If it doesn't work, please share link to page where you added List, we can check it again easier

Honestly pretty disappointing that squarespace has a button that says, "read bio" without an automatic lightbox option. 

Hi there,

How can I link a "Read Bio" button to a page within my website. I embeded the link but whenever I click the button, it always returns to the homepage. When I try to link it to another website, it works, but not for a page within my website. Please help! Thank you!

On 2/25/2024 at 7:18 AM, Nhung said:

Hi there,

How can I link a "Read Bio" button to a page within my website. I embeded the link but whenever I click the button, it always returns to the homepage. When I try to link it to another website, it works, but not for a page within my website. Please help! Thank you!

Can you share link to page where you use read bio button? We can check easier

I have a similar question for my People List page but with the complication that some of the Team Members have bios that are externally linked and some where the bio is listed in the list description field. I'd like to be able to:

1) click on the button to show the list-item-content__description if it exists there

or

2) click on the button that will navigate to an external link

Do you know if this is possible or other ideas that might work for this situation?

Thanks so much!

On 6/11/2024 at 1:11 AM, justmytype said:

I have a similar question for my People List page but with the complication that some of the Team Members have bios that are externally linked and some where the bio is listed in the list description field. I'd like to be able to:

1) click on the button to show the list-item-content__description if it exists there

or

2) click on the button that will navigate to an external link

Do you know if this is possible or other ideas that might work for this situation?

 

Thanks so much!

Can you share link to people list page? I can check your case easier.

@tuanphan Thanks for taking a look. The site is at https://cincifxs.squarespace.com/

Password: fragilex

On the Team page, the first section of people have external links to their bios, while the second section currently has bios that link internally. Another complication is that in the third section, one individual has a link to a bio while the other one does not. 

@tuanphan Nevermind. We are just going with as it is now. Thank you!

How do you inject the code for a specific section?

On 8/23/2024 at 2:29 AM, Tinvictus said:

How do you inject the code for a specific section?

Which code are you referring to?