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

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