Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


martelil

Question

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!

Link to comment
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

Hi,

How about this? I helped a member recently.

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

Pass: abc

Before

before2.thumb.png.19a08d2a25975e8c22b3b4d63a7f4b28.png

After clicking title/image

after1.thumb.png.d60dfc41a82e690462bc870145535c46.png

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
  • 0
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?

readmore.thumb.png.f398e39093abb8e4ddb6774acae24327.png

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>

pageheader.thumb.png.c1e5a2c42dd32952e4c968bbee99d571.png

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
  • 0
Posted (edited)

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;
}

List_before.png

List_dropdown.png

Edited by martelil
Link to comment
  • 0
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;
}

List_before.png

List_dropdown.png

Can you share link to page where you added the code? We can tweak it 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

Create an account or sign in to comment

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


×
×
  • Create New...