List Item Button into a dropdown info

caqtec · August 10, 2022

Hello,

I was wondering if it was possible to have list item buttons to be clickable to show additional information on the same page, like an accordion? I currently have the teams page set up like this as a "List" and want to be able to click on the photo/name/position and a drop down of their contact info will show up.

tuanphan · August 11, 2022

Something like this? (Click Read Bio)

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

Pass: abc

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

Pass: abc

Here I used List Section + Custom Code.

caqtec · August 11, 2022

Hi! Yes, either one of them will work. I was trying to figure out how to do it, but for some reason I couldn't find the correct options/settings.

tuanphan · August 14, 2022

On 8/11/2022 at 8:58 PM, caqtec said:

Hi! Yes, either one of them will work. I was trying to figure out how to do it, but for some reason I couldn't find the correct options/settings.

With second option, first add a List Section

Next, add this code to Page Header (Page where you added 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>

caqtec · August 15, 2022

Thank you so much @tuanphan!!

EmsHart · August 5

Hi tuanphan. I have recently come across your code above to create

List Item Button into a dropdown info

Do you know if there is some code I could add in to allow a job title to appear under the persons name?

tuanphan · August 7

On 8/5/2023 at 6:45 PM, EmsHart said:

Hi tuanphan. I have recently come across your code above to create

List Item Button into a dropdown info

Do you know if there is some code I could add in to allow a job title to appear under the persons name?

Yes. This is possible. Can you share link to page where you use List? We can give exact code for your case

List Item Button into a dropdown info

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

caqtec

tuanphan

caqtec

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

List Item Button into a dropdown info

Link to comment

List Item Button into a dropdown info

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources