Checkboc inside an anchor tag not working

OL Connect Professional Designer
1

I am using one of the Mem,bership registration template in Connect Designer and I am adding a simple tab with the below HTML.

Unfortunately the checkboses inside the anchor tags do not work, Any idea why?

<ul class="tabs" data-tab><li class="tab-title active"><a href="#panel1">Tab 1</a></li> <li class="tab-title"><a href="#panel2"><input id="tab2check" name="tab2" type="checkbox"><label for="tab2check">Tab 2</label></a></li><li class="tab-title"><a href="#panel3"><input id="tab2check" name="tab3" type="checkbox"><label for="tab3check">Tab 3</label></a></li><li class="tab-title"><a href="#panel4"><input id="tab2check" name="tab4" type="checkbox"><label for="tab4check">Tab 4<lable></a></li></ul><div class="tabs-content"><div class="content active" id="panel1"><p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p></div><div class="content" id="panel2"><p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p> </div><div class="content" id="panel3"><p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p></div><div class="content" id="panel4"><p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p></div></div>
2

I copied and paste your code into an empty web based Template and the check box do work, well, at least when I click them they are checked.

Can you elaborate?

3

Thank you for your reply.

To reproduce the issue, you need to use one of the starter templates in Connect designer. Try the Membership registration template in COTG. This i ssimply because the code snippets uses the Zurb foundation classes. This framework is already available in these starter templates so you don’t need to add the foundation js and css to test.

The checkboxes will appear and you can select them but they are not displaying the content of their corresponding DIV.

For example clicking on Tab 2 should both select the checkox AND display the text under
div class=“content” id=“panel2”

and so on. I hope this is clear. Perhaps there is an issue with the foundation framework version used in Connect?

4

Weird because to me it does change the content of the DIV but the checkbox isn’t checked.

To help you properly we would need to see the Template and reproduce the issue. I suggest you open a technical support ticket through our website.

5

I did more testing and here are my findings:

If you put your code, alone on a section, the <a> doesn’t execute but the checkboxes are checked.
If you put your code inside another Template, like the one you suggested, the <a> does execute but the checkboxes aren’t checked.

You could start digging into the Foundation CSS file to figure out what is causing this or you could add some javascript event handler to check the checkbox which is inside the tab (<a>) that you select.

6

I am glad you were able to reproduce the behavior.

The behavior is the same whether you add javascript or jqurey click event to attempt to select\deselect the buttons.

I don’t think it has anything to do with the foundation framework as the issue is manisfested in another way without the use of foundation, so I am inclined to think something in Connect Designer is trigerring this behavior

All I am after here is a workaround to this issue. Is there anything you can suggest? I am sure the great minds in Objectif Lune are able to sort out this simple issue?

7

At this point, please open a technical support issue so a technician can dig into it.
You can do this through our website.