Jump to content

Turn Blog or Summary Block Excerpt into Dropdown / Accordion for Directory

Recommended Posts

I'm creating a contact directory for extra healthcare providers. I want to have their name visible as well as the category + tags which would include what they do (eg. Psychiatrist), clinic name, and where they're located (Auckland, National, Online, etc). Then the rest of their details to be hidden as a dropdown.

I've seen some code to do this for list sections so was wondering if it could be applied to blog posts or summary blocks? I don't mind which one I use, I thought the Blog post page may be easier as you don't have to add code to style the text (I assume it would take a while to style each line of text in the summary blocks).

The reason I want all the info to stay in the excerpt and not click through to the blog page is because eventually I would like to add a filter so people can search by comments / practitioner type / location etc. Just don't have the funds yet for extra plugins. If it helps I do have the Lazy Summaries plugin.

I also have this code to turn off clickthrough url to blog post, may not be helpful?

<!--<style>
  .summary-title { pointer-events: none !important; }
</style>

Edited by melaniejaane
Link to comment
5 hours ago, melaniejaane said:

I'm creating a contact directory for extra healthcare providers. I want to have their name visible as well as the category + tags which would include what they do (eg. Psychiatrist), clinic name, and where they're located (Auckland, National, Online, etc). Then the rest of their details to be hidden as a dropdown.

I've seen some code to do this for list sections so was wondering if it could be applied to blog posts or summary blocks? I don't mind which one I use, I thought the Blog post page may be easier as you don't have to add code to style the text (I assume it would take a while to style each line of text in the summary blocks).

The reason I want all the info to stay in the excerpt and not click through to the blog page is because eventually I would like to add a filter so people can search by comments / practitioner type / location etc. Just don't have the funds yet for extra plugins. If it helps I do have the Lazy Summaries plugin.

I also have this code to turn off clickthrough url to blog post, may not be helpful?

<!--<style>
  .summary-title { pointer-events: none !important; }
</style>

Can you show up some screenshots/samples you want to achieve?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
8 hours ago, melaniejaane said:

Hey @bangank36 thanks so much for looking into this! I haven't finalised design yet but thought functionality kind of like a large accordion grid. Do you think it looks achievable or is there a better way to do it? Thanks again! 🙂

Screenshot 2022-11-05 at 1.30.51 PM.png

I think we can work around with this layout by using the People section

image.thumb.png.a9034e6207eebe4a6c409abecaca39e8.png

To show and hide the information, I think you can get reference from the following post: 

 

Hope it makes sense

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
19 hours ago, bangank36 said:

I think we can work around with this layout by using the People section

image.thumb.png.a9034e6207eebe4a6c409abecaca39e8.png

To show and hide the information, I think you can get reference from the following post: 

 

Hope it makes sense

I actually did see this post and tried it out, only problem is it hides all of the description and there is no option to add the extra info like categories, tags etc. I was hoping there would be a way to replicate that code but apply it to blog posts or summary blocks. Do you know if that's possible or really complicated?

Link to comment
On 11/7/2022 at 2:27 PM, melaniejaane said:

@tuanphan  Thank you both for looking into this. Links to website and comment from other thread below:

Summary block page: https://www.beehyve.health/adhd-support
Blog posts: https://www.beehyve.health/adhd-support-contacts
Password:  abc

 

 

I did a quick demo with summary block here. You try checking

 

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
On 11/11/2022 at 4:05 AM, melaniejaane said:

Thanks so much @tuanphan! What code should I use to replicate your demo? Also is it possible to turn off the title's click-through link to blog post page without turning off the click dropdown function?

Thanks again! 🙂

Add Summary Post with Excerpt
Add Click Me text (use Heading 4) to top of Excerpt
Next, add this code to Page Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('.summary-item').each(function(i, e) {
      $('h4').click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
  .summary-v2-block h4~* {
    height: 0;
    overflow: hidden;
    transition: all 0.1s ease;
}
  .tp-list-des-open~* {
    height: 100%;
    transition: all 0.1s ease;
}
.summary-title-link {pointer-events: none;}
</style>
Explain
  • Script code: when clicking h4 in Excerpt >> Toggle a class name: tp-list-des-open
  • style code (first code): make excerpt invisible by setting height 0
  • style code (second code): make excerpt appear by increasing height to 100% (= height of summary item)
  • style code (third code): disable title click
 

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

Thank you so much @tuanphan so incredibly helpful! 

Only issue is now that I have added in the ellipsis icon - I notice weird and inconsistent gaps between the elements. It's hiding the text correctly but for some reason is keeping the white space / margin between the lines of text. Would you have any ideas of how to target this? Everything I've tried isn't working.

Thanks again!

Edited by melaniejaane
Link to comment
On 11/15/2022 at 3:16 PM, melaniejaane said:

Thank you so much @tuanphan so incredibly helpful! 

Only issue is now that I have added in the ellipsis icon - I notice weird and inconsistent gaps between the elements. It's hiding the text correctly but for some reason is keeping the white space / margin between the lines of text. Would you have any ideas of how to target this? Everything I've tried isn't working.

Thanks again!

Can you share link to page where you added it? We can check it easier

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.