Menu icon Foundation
F6-Accordions, input elements within title

Using accordions, but need to drop input elements (checkbox) within the .accordion-title. Obviously this is semantically incorrect and I would rather not use a hack. Is there another method of achieving this? Is there a way to modify accordions to use another element other than <a>?

Thanks for any assistance!

accordions

Using accordions, but need to drop input elements (checkbox) within the .accordion-title. Obviously this is semantically incorrect and I would rather not use a hack. Is there another method of achieving this? Is there a way to modify accordions to use another element other than <a>?

Thanks for any assistance!

Ryan McCready over 1 year ago

Hi Keith,

Wow, this is an interesting interaction. Would love to know how this is supposed to work if the title is clickable. What is the design problem you are trying to solve?

By the way pretty sure you can use the accordion with div's instead of ul's and li's

Keith Savoie over 1 year ago

Its pretty straight forward. I have a title that has a checkbox next to it with "Approved".  I need to optionally check that box without opening the accordion. If I were to click anywhere else in that title area the accordion would open.

Keith Savoie over 1 year ago

Unless someone has a better solution I was able to deal with this via jquery. You still have semantically incorrect HTML (i know BOOO, not happy with it either) but it gets the job done.  Just drop the class .force-click on the input element. 

$('.force-click').click(function () {

    event.stopPropagation();

});

Janet Tingey 11 months ago

Thanks, Keith, this just solved this same problem for me. I appreciate your posting the solution.