Menu icon Foundation
Accordion javascript question, clickablity

So my boss was requesting for me to have the acordions only clickable based on the course title: and not the labels or the rest of the row http://new.omegadesignla.com/courses/math.php

would this even be possible and would it even be worth the work?

jqueryjavascriptaccordion

So my boss was requesting for me to have the acordions only clickable based on the course title: and not the labels or the rest of the row http://new.omegadesignla.com/courses/math.php

would this even be possible and would it even be worth the work?

Chris M almost 5 years ago

Hey Ryan,

It's probably possible, by changing around what element triggers the accordion action - however, I'd say it's a horrible idea from a useability point of view. What you need to ask is, what would be gained by removing the click functionality from the rest of the row? And what drawbacks would removing that functionality have?

Some quick thoughts:

  • It becomes harder for users to navigate (before they had a large area to click, now a far smaller area, meaning it's slower to quickly flick through the site)

  • It's less intuitive (other similar applications on websites have fully clickable rows - if they go to click on a row, and it doesn't react as expected, they may not realisethat clicking functionality has been limited to one small area).

  • Would the background of the accordion row still change colour on hover? If yes, it seems strange that it changes but doesn't react to a click. If no, it's suddenly far less obvious that it's something the user can interact with.

Weigh those drawbacks up, and then ask your boss what benefit is added that outweighs them.

Of course, bosses can be stubborn, so good luck!

Rafi Benkual almost 5 years ago

Do you mean, disable the accordion is based on parameters the course title would allow? You can do this with jQuery. I found something about this in the jQuery documentation.

Initialize a accordion with the disabled option specified.

 Initialize a accordion with the disabled option specified.
$( ".selector" ).accordion({ disabled: true });
Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
//setter
$( ".selector" ).accordion( "option", "disabled", true );

You will need to add a disabled variable as well.

You would also need to style the disabled accordions so users know it cant be clicked. It may be easier to toggle class with display: none on the accordions that shouldn't show.

Ryan Hellerud almost 5 years ago

lol, yeah. All good points and I agree 100%. At first glance I told her it would not be possible, Shes not even here and wont see her till friday but I would like to look in and explore how to do it if only as an excuse for me to learn/play with some javascript

Ryan Hellerud almost 5 years ago

Hi Rafi, Not sure what you mean but I think Jeff understood me correctly. She just wants the drop down toggle on/off when you click the course title div im guess. No idea why she wants that I think because she doesnt want it to togle when you click the label. I dont think its that big of a deal just a reason for me to look into more javascript.