Jeroen Peters

Thanks for your reply @billanddave . It is possible iOS does some ‘crazy’ stuff, I have had it seen happen before with spaces.. So hopefully that’s resolved now ??

Thanks for staying in touch!

@billanddave I issues an update, maybe this will help fix the issue she is having, it’s version 1.29.2. Looking forward to hearing from you.

Kind regards, Jeroen

Hi @billanddave I am just curious to know if you have received any update on the matter from your client.

Kind regards, Jeroen

That’s really weird. Maybe there is some odd character in there which we are unable to see at the moment. Maybe if you could access the server logs you can see if there is some character (even if it’s a non breaking space) in there that you would not see on the frontend. Could you check that, or ask for a screenshot?

You can try to do a space after Ontario and you would get no results.

There is a thing for me in there to strip the search query from surrounding space (which I will fix), but this can the reason why she is having this issue.

hi @billanddave , glad to hear it works again. I did test it with safari only. The search button is probably just a css thing that the theme or another is using. For a cup of coffee I can help with this if you can’t fix it yourself.

kind regards Jeroen

hi @billanddave

thanks for your message. I just tested it on your site on iOS 17.1 when I searched on Netherlands I got both two results. Also the Ontario one works on this devices. Did you test it on an iPhone or perhaps an iPad? More information would be good so I cannpinpoint it better

kind regards,

Jeroen Peters

Haha thanks for your quick replies! I am glad it works ?? Thanks again for the coffee, I will enjoy it ??

Kind regards Jeroen

hey @johno69, I think in my test-setup I forget the css..

I did just test it with this CSS:

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

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

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

and this JS:

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);
    });
});

I assure you we are going to fix it haha ??

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

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

Thanks for your assistance @beatrice12

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

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 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 ??

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