Menu icon Foundation
Input checkbox + accordion tab

Just trying to accomplish something here that isn't very common I guess.

I have two fdn. columns in side a HTML form, left side the regular stuff everybody needs to fill out but on the right side I have other fields, those fields hold extra (optional) information.

What I like to do is hide those optional field by default. That's the easy part, just put them inside an vertical fdn. accordion tab. The difficult task here is there needs to be an input checkbox field to be selected to submit those optional information to the database.
What I think to accomplish is if someone push the hamburger to active the accordion tab this input checkbox field gets 'checked' (focused) at the same time.

By looking at my picture you get the idea I think.

Anybody know how to accomplish something like this?

Schermafbeelding 2015 04 08 om 15.19.11

Just trying to accomplish something here that isn't very common I guess.

I have two fdn. columns in side a HTML form, left side the regular stuff everybody needs to fill out but on the right side I have other fields, those fields hold extra (optional) information.

What I like to do is hide those optional field by default. That's the easy part, just put them inside an vertical fdn. accordion tab. The difficult task here is there needs to be an input checkbox field to be selected to submit those optional information to the database.
What I think to accomplish is if someone push the hamburger to active the accordion tab this input checkbox field gets 'checked' (focused) at the same time.

By looking at my picture you get the idea I think.

Anybody know how to accomplish something like this?

Schermafbeelding 2015 04 08 om 15.19.11

This post has been closed. No new replies can be added.

Bob Sawyer over 4 years ago

All you need is a little jQuery magic to accomplish this. Essentially, if someone clicks the hamburger (open), AND the checkbox is not checked, then check it. If they click the hamburger again (close), AND the checkbox is checked, uncheck it.

Shmoo over 4 years ago

I thought jQuery would do the trick, I'm not very familiar with Javascript so I think I have to Google a little bit on this subject to get some tutorials.

Thanks anyway..

Shmoo over 4 years ago

Got it working...

Just add HTML ID's to the url tag ( a href ) of the fdn. accordion + checkbox inside the accordion content you want to automatically be selected or checked when opening or closing the accordion tab.

// Checkout page
$(document).ready( function () {

  $("#select_extra_fields").click(function() {

    var checkBox = $("#ship-to-different-address-checkbox");

    checkBox.trigger('click');

  });

});

Bob Sawyer over 4 years ago

Yep. As I don't know the names/ids/classes of your buttons, I can't give you specific code, but it would look something like this:

http://codepen.io/bobsawyer/pen/PwvrYW

Note that for the purposes of the demo, the checkbox is located outside of the accordion. For your purposes, you'd want to move it inside the accordion.