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

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>

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?

18 hours ago, bangank36 said:

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

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

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

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

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

Hope it makes sense

19 hours ago, bangank36 said:

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

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?

@tuanphan @bangank36 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

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

13 hours ago, tuanphan said:

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

 

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

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!

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

17 hours ago, tuanphan said:

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

Thanks @tuanphan I ended up going back through all my blog posts and changing the bold text to H4 so I it was easier to target. Then tried some new code, managed to fix it. Thanks so much for you help! 🙂 

I have a similar issue that I'd love some assistance with. I am trying to have the excerpt of a summary list block behave similary to an accordian. The goal is to have the titles and meta data present when viewing the page, but the description only become available once the user chooses to access it. So in the example below I have toggled "excerpt" to show but I'd like that hidden. Is this possible? Maybe with a down carrot or read more type link after the title?

I am hoping that this can be applied at the page level so that it will affect 7 blocks. This is a yearly weeklong event so each day is given a summary block. 

The url to check it out is:

https://www.publicphilosophyweek.org/ppw2025home-working

Thanks!

So

Initial: Show this only

and when click, show this?

On 4/25/2024 at 3:38 AM, michael.dabbs said:

I have a similar issue that I'd love some assistance with. I am trying to have the excerpt of a summary list block behave similary to an accordian. The goal is to have the titles and meta data present when viewing the page, but the description only become available once the user chooses to access it. So in the example below I have toggled "excerpt" to show but I'd like that hidden. Is this possible? Maybe with a down carrot or read more type link after the title?

I am hoping that this can be applied at the page level so that it will affect 7 blocks. This is a yearly weeklong event so each day is given a summary block. 

The url to check it out is:

https://www.publicphilosophyweek.org/ppw2025home-working

Thanks!

 

@tuanphan Yes that is correct. But I think it would need some form of symbol to reveal the caption / excerpt versus actually going to the event itself. We still need the users to be able to get to the full event list that allows them to see location details etc. 

On 4/28/2024 at 11:20 PM, michael.dabbs said:

@tuanphan Yes that is correct. But I think it would need some form of symbol to reveal the caption / excerpt versus actually going to the event itself. We still need the users to be able to get to the full event list that allows them to see location details etc. 

You can use this code to Website > Website Tools > Code Injection > Footer

<script>
  $(document).ready(function(){
  $('.summary-item').each(function() {
    var plusicon = $(this).find('.summary-title');
    $('<span class="summary-custom-icon"></span>').insertAfter(plusicon);
});
  });
</script>
<script>
  $(document).ready(function(){
  $('.summary-item').each(function() {
   $('.summary-custom-icon').toggleClass('show-hide');
});
  });
</script>
<style>
span.summary-custom-icon:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    color: white;
    font-size: 30px;
}
span.summary-custom-icon {
    cursor: pointer;
}
.summary-excerpt.summary-excerpt-only {
    display: none;
}
.show-hide ~ .summary-excerpt {
    display: block !important;
}
</style>

Initial

Click Arrow

@tuanphan Thanks for the assist. I am having a couple of issues with it. When I input the code it showed up bu the toggle didn't work. But the broader concern is that it has to only apply to this one page. There are other summary blocks in the site that cannot be affected by it. I was hoping it could be achieved either in the page header code section or by identifying specific blocks / sections. 

Unfortunately I could not leave the code in place for you to see how it behaved because it would affect the other sections of the site that are currently consumer facing. 

On 4/30/2024 at 9:23 PM, michael.dabbs said:

@tuanphan Thanks for the assist. I am having a couple of issues with it. When I input the code it showed up bu the toggle didn't work. But the broader concern is that it has to only apply to this one page. There are other summary blocks in the site that cannot be affected by it. I was hoping it could be achieved either in the page header code section or by identifying specific blocks / sections. 

Unfortunately I could not leave the code in place for you to see how it behaved because it would affect the other sections of the site that are currently consumer facing. 

 

You can add code to Individual Page Header Code Injection, it will run on that page only.

You can duplicate the current page & keep code there, I can check again easier.

Hi @tuanphan. This page is already a duplicate just for testing purposes. So I have done as you suggested and added the code you provided into the page header code injection. What I am seeing is that it does not function as a toggle, rather the carrot just appears above the excerpt. 

I have the summay blocks set to display on the Sunday and Monday sections but not on the rest of the sections. I figured that might make a difference as well. 

Just one last FYI> I use square kicker for a lot of customization of type and color etc. I don't think that should affect what you are suggesting but just making sure you have all the information.

Thanks again!