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