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

  • Replies 19
  • Views 3.9k
  • 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 18

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!)

caqtec Level 4

caqtec

Posted
  • Author
Posted

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.

  • Solution
tuanphan Level 18

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!)

  • 11 months later...
EmsHart Level 2

EmsHart

Posted
Posted

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 Level 18

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!)

  • 5 months later...
tuanphan Level 18

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!)

  • 6 months later...
thehalted Level 1

thehalted

Posted
Posted

Is there a way to do this, that includes the information that opens being full screen width? Essentially, I'd like for the drop-down information to "take over" the bottom portion of the section, and span multiple columns. 

tuanphan Level 18

tuanphan

Posted
Posted
On 8/6/2024 at 2:05 AM, thehalted said:

Is there a way to do this, that includes the information that opens being full screen width? Essentially, I'd like for the drop-down information to "take over" the bottom portion of the section, and span multiple columns. 

You can use this approach, I also answered your email (but you entered incorrect email in forum)

 

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!)

  • 1 month later...
tuanphan Level 18

tuanphan

Posted
Posted
On 9/17/2024 at 6:44 PM, bwmoore said:

I'm also trying to figure this out but for the buttons on my 'Our team' section that say 'Read bio'

Site link below

https://www.rooftopsocial.com/

Any help?

Can you enable button? I can test code easier

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!)

bwmoore Level 3

bwmoore

Posted
Posted
On 9/19/2024 at 7:16 PM, tuanphan said:

Can you enable button? I can test code easier

Yep of course! have enabled the button now. Thank you for helping.

bwmoore Level 3

bwmoore

Posted
Posted
9 hours ago, tuanphan said:

Thank you

So you want

When users click Read Bio button >> Show more info under it?

image.png.df3758dc95d4b1a42998fd757704b680.png

Yeah either that, or if simpler, open a lightbox with the bio. I just don't want to go to a new page where I list all team members again. 

tuanphan Level 18

tuanphan

Posted
Posted
On 9/27/2024 at 6:59 AM, bwmoore said:

Yeah either that, or if simpler, open a lightbox with the bio. I just don't want to go to a new page where I list all team members again. 

Yes. Use Lightbox will be simpler, but it will require plugin, if you want to use lightbox, try this WM Popup Plugin.

https://www.will-myers.com/products/p/modal-popups-in-squarespace

use code TUAN to get 10% discount

If you don't want to use plugin, let me know, I will give dropdown idea

  • we will add some text to description
  • use code to move these appear under button and hide it initial
  • use extra code to make it appears when users click button

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!)

bwmoore Level 3

bwmoore

Posted
Posted
On 9/29/2024 at 8:39 PM, tuanphan said:

Yes. Use Lightbox will be simpler, but it will require plugin, if you want to use lightbox, try this WM Popup Plugin.

https://www.will-myers.com/products/p/modal-popups-in-squarespace

use code TUAN to get 10% discount

If you don't want to use plugin, let me know, I will give dropdown idea

  • we will add some text to description
  • use code to move these appear under button and hide it initial
  • use extra code to make it appears when users click button

Thanks, I don't really want to use the plugin! But am interested in the code solution! 

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