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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment