Jump to content

List Item Button into a dropdown info

By caqtec, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

caqtec Level 4

caqtec

Posted
Posted

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
  • Replies 8
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

caqtec
caqtec

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

tuanphan
tuanphan

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.

caqtec
caqtec

Thank you so much @tuanphan!!

Posted Images

tuanphan Level 17

tuanphan

Posted
Posted

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
tuanphan Level 17

tuanphan

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
tuanphan Level 17

tuanphan

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...
tuanphan Level 17

tuanphan

Posted
Posted
On 2/1/2024 at 6:12 PM, fletch77 said:

Hi @tuanphan, do you know anyway to put an icon for phone and/or email icon that would link?
Maybe a hover state over the image?

Yes. Possible.

With Phone 

  • add text: Phone - URL: tel:+0123456789 (replace 0123...with your phone)
  • then share link to page, I can give code to replace Phone text with Phone Icon

Similar for Email, url: mailto:abc@gmail.com

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources