Jump to content

List Item Button into a dropdown info

Go to solution Solved by tuanphan,

Recommended Posts

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.

image.thumb.png.1cd7c9c74c42a057fdf85185eb23a9d5.png

Link to comment

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.

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
  • Solution
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

image.thumb.png.414eac4bbf9390be046cfd9770ab890d.png

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>

 

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.