caqtec Posted August 10, 2022 Share Posted 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. melaniejaane 1 Link to comment
tuanphan Posted August 11, 2022 Share Posted 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. 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
caqtec Posted August 11, 2022 Author Share Posted 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. Link to comment
Solution tuanphan Posted August 14, 2022 Solution Share Posted 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 1 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
caqtec Posted August 15, 2022 Author Share Posted August 15, 2022 Thank you so much @tuanphan!! tuanphan 1 Link to comment
EmsHart Posted August 5 Share Posted 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? Link to comment
tuanphan Posted August 7 Share Posted 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment