js click event

Hi ashf,

Sure, there’s nothing preventing you from binding your own events. Are you trying to do something specific?

Chris

I just want to do something like:

*Switch show/hide status of an element on the page
*Trigger to open popups

Not really clear on what you mean. Like I said, there’s nothing to prevent you from writing whatever JS you want.

Do you maybe just mean you want the submenu to open when you click on the parent item?

I mean if there is an option to set js function to menu item but just link.

There is no accordion plugin that have ability to set js function to menu item as far as I know.
So if this plugin can do that, it’s awesome.

There isn’t a setting, I’m just saying you can add whatever custom JS you like via a custom JS file.

Sorry, I’m still not really clear from your description what you’re trying to achieve. Perhaps you can provide specifics (when X occurs, trigger action Y) or an example or what you’re looking to do so I could better advise you? Without understanding what your goal is, it’s tough to provide any advice.

It’s dead simple.

i.e.

There are three popups, A, B and C.
When click menu item “A”, popup “A” opens.
When click menu item “B”, popup “B” opens.
When click menu item “C”, popup “C” opens.
(using some pupup plugin that have js api trigger)

There are three hidden elements, A, B and C.
When click menu item “A” on accordion, “A” show up but others become hidden if they’re shown.
When click menu item “B” on accordion, “B” show up but others become hidden if they’re shown.
When click menu item “C” on accordion, “C” show up but others become hidden if they’re shown.
(using something like tab plugin that have js api trigger)

similarly, I can control other plugins that have js api in this way.

Sure, I mean all that logic would be custom javascript that you’d have to write, but you can attach click events to the menu items to do whatever you want ??

Yes I understand that.
But this function would be nice if you add in future release.

What function are you referring to specifically?

I intend to add API functions and events for the control of the accordion menu itself. But controls for other plugins like you mentioned (popups) wouldn’t be appropriate as part of the core plugin. That’s something that would be a best practice to provide a hook for, but not add to the script explicitly.

In other words, the plugin should be extensible, but not include third party code. This keeps everything modular and flexible.

i.e.
just add an field to write js code or function name in addition to a link.

onclick: openPopup(123);

@ashf: It’s best practice to do that kind of functionality in a separately enqueued JS file from a child theme.

Ah, okay, so what you’re really looking for is a way to add inline javascript to your links.

As pressworthammer was getting at, that’s considered bad practice, as it violates the separation of concerns (don’t mix your JS and HTML together). Much better practice is to externalize any javascript. This is why I wasn’t understanding what you needed from the plugin, because there’s no need for the plugin to offer anything special in order for you to bind click events.

That being said, what I might do is add either a hook or a setting for the menu items that allows you to add whatever string of attributes you’d like to the anchors. Then you could add your JS attribute if you really wanted to (though I would still recommend externalizing it).

External JS example:

jQuery( '.bellows .bellows-target' ).on( 'click' , function(e){
  //do your thing
});

Yes I usually do same thing.
But on the other hand, popular plugin like Smart Slider have event binding function
see below:
https://doc.smartslider3.com/article/1183-events-layer-animation-triggering

I like it. Is this bad practice?

That’s pretty slick, but I think that would be overkill in this case; in the end it would be less flexible and only marginally easier than writing the JS manually. Bear in mind that it may make sense in the context of that slider plugin, where its purpose is to control, animate, and trigger various elements; it makes less sense for an accordion menu plugin where such controls would be far less common.

WordPress coding guidelines dictate “decisions, not options”. Adding something like this would add weight to the accordion plugin but benefit very very few users (aka ‘bloat’). This is why it is best to make things as extensible but as light as possible, so that those who need to can extend the functionality, but those who don’t aren’t encumbered by extraneous settings and code.

In the end, it’s a judgment call, but I think that providing a hook and/or setting to customize the anchor attributes definitely makes the most sense here. It gives you all the flexibility you need without negatively affecting other users.

Hope that makes sense ??