Open items as accordian?

Hi @johno69

Yes I think this can be done, but I do have to say that there are so many ways to do this that I can’t give you good directions. It also depends on the themes you are using. Generally I would advice you to not change the code of plugins, because these changes will get lost when there is an update.

The plug-in itself is free of use and many of my free hours went into that. It’s something I enjoy making and sharing. However, and I know this might come of as unfriendly, I don’t provide styling or customizations for individual sites for free.

Kind regards,

Jeroen Peters

I didn’t expect anything for free. Was happy to pay for anything that needs customisation.

Thank you for your quick reply @johno69 I am sorry to be blunt in this way, but lots of users are expecting me to fix styling issues because I am the author of the plugin, while it’s designed to blend into many themes.

If you still want to, can you give me your website address to take a look at what would be possible in your situation?

Kind regards,

Jeroen

My site is https://www.lawnbowls.com

I am using your plugin here: https://www.lawnbowls.com/glossary

That styling works for that page very well as the content of each items is short.

I am looking to use it on this page too: https://www.lawnbowls.com/game-formats

But as each item there has a lot more content, i’m manually adding those into an accordian.

Hi @johno69,

can you add Javascript to your website? I have a solution to work with CSS and JS, without altering the plugin.

CSS (this can mostly be added by WordPress Admin -> Appearance -> Customizer -> Custom CSS):

.name_directory_name_box {
    margin-bottom: 10px;
    cursor: pointer;
}

[role="definition"] {
    display: none; 
    margin-top: 5px;
    padding: 5px;
    background-color: #f0f0f0;
    border-left: 3px solid #007BFF;
}

.name_directory_name_box hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.name_directory_name_box.active [role="definition"] {
    display: block;
}

Javascript

If you can add the javascript yourself, you can do it with this code below. Otherwise I recommend HeaderFooterManager

jQuery(document).ready(function() {
    jQuery('.name_directory_name_box [role="term"]').click(function() {
        var parentBox = jQuery(this).closest('.name_directory_name_box');
        parentBox.toggleClass('active');
        parentBox.find('[role="definition"]').slideToggle(200); // Toggle de zichtbaarheid van de definitie
    });
});

I am curious to your findings.

Kind regards Jeroen

Thank you. I will check this tomorrow.

First thought is, will this solution target all instances?
I’m hoping to keep the glossary page displaying as normal, so just targeting one category/shortcode/page.

should be ok to add js as a snippet.

Hi @johno69 sure, that’s okay. This would/should be working on all instances. With the plugin HFCM (Header Footer Code Manager) you can add these snippets (in retrospect, please also use CSS with this plugin instead of Customizer) and just target the pages that you want to use the features on ??

Amazing, thank you. I have it working here: https://www.lawnbowls.com/formats

I need to tweak some more styling, but you nailed it. Thank you.

There is one small issue I am finding, when clicking one to expand it, then clicking another, it seems to flash open then clicking again will open correctly.

Also, let me know where I can buy you a coffee please ??

Hey @johno69 sorry for the late reply, I was hosting a birthday ??

I see what you mean, it looks like the initial ‘state’ isn’t correct. Please let me share my coffeelink after this state issue is fixed. I’ll be posting here

Kind regards Jeroen

Hi @johno69 I think I got it ??

If you add this line

jQuery('.name_directory_name_box [role="definition"]').hide();

after the initial jQuery(document).ready(function() { I think it will be look good. Please leave the rest of the Javascript as is

This makes the description really ‘hidden’, when the users click on the name, the description will be shown (it just toggles the visibility-state). Before it wasn’t really invisible for the Javascript, so that is why the first click doesn’t show it at this moment.

Please let me know your finding ?? My coffee place is https://ko-fi.com/jeroenpeters

Kind regards, Jeroen

We’re getting closer. ??

1st click = Opens the content

2nd click = Opens the content again

3rd click = Closes the content.

2nd click should close it again, no need for 3rd click. Can test here https://www.lawnbowls.com/formats

@johno69 just to let you know I didn’t forget this thread, but I have a couple of busy days.

No problem at all. Thanks for your help.

PS. Enjoy your coffee ??

• This reply was modified 4 months, 2 weeks ago by johno69.

Hi @johno69, thank you for your donation. A new bag of arabica beans will be ordered haha ??

As for the Javascript, could you please try to replace the Javascript with this?

jQuery(document).ready(function() {
    jQuery('.name_directory_name_box [role="definition"]').slideUp(1);
    jQuery('.name_directory_name_box [role="term"]').click(function() {
        var parentBox = jQuery(this).closest('.name_directory_name_box');
        parentBox.toggleClass('active');
        parentBox.find('[role="definition"]').slideToggle(200);
    });
});

The CSS can remain the same. I hope this will work the way you intended it too ??

I’ll be glad to hear how it turns out.

Kind regards, Jeroen Peters

No luck, it flashes open and slided closed on 1st click. 2nd click opens, and it works good from that point on.

I rolled back to the previous one. It’s the closest so far.