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

melaniejaane · November 4, 2022

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 November 4, 2022 by melaniejaane

Beyondspace · November 4, 2022

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?

melaniejaane · November 5, 2022

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

Beyondspace · November 5, 2022

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

melaniejaane · November 6, 2022

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?

melaniejaane · November 7, 2022

@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

tuanphan · November 10, 2022

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

melaniejaane · November 10, 2022

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

tuanphan · November 12, 2022

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

melaniejaane · November 15, 2022

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 November 18, 2022 by melaniejaane

tuanphan · November 21, 2022

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

melaniejaane · November 22, 2022

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

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

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

melaniejaane

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources