We Keep Coding

How to make one droplist which is clicked to drop?

just few month ago started learning programming. At the moment studying JS and want to make dropable droplist. Created few droplists and occur with the problem, what all dropdown lists opening after click. Need to be opened only one which was clicked:
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<div class="main">
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
</div>
And write simple JS vanilla code:
const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', () => {
for (i = 0; i < droplist.length; i ++){
droplist[i].classList.toggle('display')
};
});
}
Can somebody tell me where i made a mistake?
https://codepen.io/miroso/pen/dyGXOYq
Thanks for helping me, want to ask extra question: Also, maybe could you suggest solution if for example click is made outside the div, what condition i should write in the code?

You are doing toggle to all the containers... you should toggle only the one that corresponds to clicked element... so in you javascript you should take care of that, if you change your javascript for:
const droplistLabel = document.querySelectorAll('.droplist__selected');
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', (e) => {
let parent, droplist;
// look for droplist__selected
parent=e.srcElement;
while(!parent.classList.contains('droplist__selected')) {
parent=parent.parentElement;
}
// get container of list and toggle
droplist = parent.parentElement.querySelector('.droplist__items-container');
droplist.classList.toggle('display');
});
}
As you can see, first get parent of clicked element that has class droplist__selected, then toggle list of parent container... and that's all.
Edit 1
Maybe this is more complicated... you have to:
Add event to document click to close all.
On an item click close all but clicked one.
Toggle clicked item.
So:
const droplistLabel = document.querySelectorAll('.droplist__selected');
document.addEventListener('click', (e) => {
// close all...
droplist = document.querySelectorAll('.droplist__items-container');
for(j=0;j<droplist.length;j++) {
droplist[j].classList.remove('display');
}
});
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', (e) => {
let parent, droplist, droplists;
// Cancel event to avoid document.click reached...
e.stopPropagation();
// look for droplist__selected
parent=e.srcElement;
while(!parent.classList.contains('droplist__selected')) {
parent=parent.parentElement;
}
// close all but clicked, get clicked and compare with the others...
droplist = parent.parentElement.querySelector('.droplist__items-container');
droplists = document.querySelectorAll('.droplist__items-container');
for(let j=0;j<droplists.length;j++) {
if(droplists[j]!=droplist) {
droplists[j].classList.remove('display');
}
}
// finally toggle clicked... get container of list and toggle
droplist.classList.toggle('display');
});
}
Hope it helps!!!

Change your javascript code to
Step 1: toggle the display clicked element, if already in shown state then hide and vice-versa
Step 2: for all the other element except the clicked item - remove the class to hide them
const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');
for (let i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', () => {
droplist[i].classList.toggle('display');**// toggle the display clicked element, if already in shown state then hide and vice-versa**
for(let j=0;j<droplist.length;j++)
{
if(i!=j)**//for all the other element except the clicked item - remove the class to hide them**
droplist[j].classList.remove('display');
}
});
}

What am I missing in my third JavaScript function?

INTRO:
Providing a little context: I am trying to create workaround solutions in a HTML/CSS/JS based webticket builder.
This means I am creating online forms with a drag and drop tool that automatically generates titles, names, ids and all that in the general HTML code. So what I can't do is change the overall set up.
Every selection field I create though gives me a small textfield which is supposed to be used as a help field for this particular selection field. So for example I have a text field "mail adress" - the help text would then show "please use the format firstname.lastname#mailprovider.com" underneath it.
This "help" textbox is plain HTML, providing me with the possibility to add extra code inbetween - hence it's everything but pretty.
the html layout is not my idea, and I can only partially change it.
What I want to do:
Create an extra list with empty links, so I can use "onclick" on each item:
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);return false;showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);return false;showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);return false;showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
The selection list then has 3 triggering functions:
1. returning the selected item to another textfield (works)
2. not opening a "#" site (works)
3. show further selection fields based on the selected list item (does not work)
This is basically an attempt to create a dynamic webform, as the tool itself doesn't provide such options
So this is what I additionally have:
- a fieldset with class "item1" and two textfields:
This code is copied directly from the tool, hence the intuitive ids and layout in general.
<fieldset class="item1"><legend>Item 1 Selections</legend><div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div><div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div></fieldset>
a CSS code hiding the fieldset "item1" when the webform is opened:
.item1 {
display: none;
}
and my js functions:
The first to return selected item to a specific textfield:
<script type = "text/JavaScript">
function returncontent(elem) {
document.getElementById("f_000000001845521").value=elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
</script>
And the second to show me the necessary selection fields for list item 1:
<script type = "text/JavaScript">
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
</script>
And now the latter is, what doesn't work and I don't understand why.
I have build several checkboxes that display/hide individual fields and fieldsets via ID or class so for my understanding I didn't do anything different this time except triggering two functions at once.
Here you can find a fiddle of what I am trying to do.

I do not know why you do it, but your problem will be solved by changing the order of functions in your onclick. I changed the place of return false; after showitem1()
Check workable version here
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="returncontent(this);showitem1();return false;">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="returncontent(this);showitem2();return false;">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="returncontent(this);showitem3();return false;">Item 3</a></li>
</font>
</ul>

I've change a couple parts of your code here but the most notable is that you can call the first (almost global type of function) from the the second function. I did also combine the three showitem functions into one and set which fieldset to show based off the clicked elements title.
You can call each function from the onclick. You would simply need to change the order of return false;, placing it at the end (or just remove it and return: false; from the function!?!).
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
var els = document.getElementsByClassName("item");
Array.prototype.forEach.call(els, function(el) {
el.style.display = "none";
});
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
function showitem(elem) {
returncontent(elem);
document.getElementsByClassName(elem.title)[0].style.display = "block";
return false;
}
.item1,
.item2,
.item3 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<!-- automatically visible -->
<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- List items as links to make them clickable -->
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="#" onclick="showitem(this);">Item 1</a></li>
<li><a id="li2" title="item2" href="#" onclick="showitem(this);">Item 2</a></li>
<li><a id="li3" title="item3" href="#" onclick="showitem(this);">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item2">
<legend>Item 2 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>
<fieldset class="item item3">
<legend>Item 3 Selections</legend>
<div id="d_000000001845952" class="field text">
<label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text ">
<label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" />
</div>
</fieldset>

document.getElementById("f_000000001845521").readOnly = true;
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementById("mymodal").style.display = "block";
} else {
document.getElementById("mymodal").style.display = "none";
}
}
toggleBoxVisibility();
function returncontent(elem) {
if(elem)
document.getElementById("f_000000001845521").value = elem.title;
document.getElementById("mymodal").style.display = "none";
document.getElementById("check").checked = false;
}
returncontent();
function showitem1() {
document.getElementsByClassName("item1")[0].style.display = "block";
}
.item1 {
display: none;
}
<input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." />
<div class="help">
<script type="text/JavaScript">
document.getElementById("f_000000001845521").readOnly = true;
</script>
</div>
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:
<div id="mymodal" class="modal">
<div class="modal-content">
<ul id="myUL">
<font size="3em">
<li><a id="li1" title="item1" href="javascript:void(0)" onclick="returncontent(this);showitem1();">Item 1</a></li>
<li><a id="li2" title="item2" href="javascript:void(0)" onclick="returncontent(this);showitem2();">Item 2</a></li>
<li><a id="li3" title="item3" href="javascript:void(0)" onclick="returncontent(this);showitem3();">Item 3</a></li>
</font>
</ul>
</div>
</div>
<fieldset class="item1">
<legend>Item 1 Selections</legend>
<div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
<input id="f_000000001845952" name="id23" value="" />
</div>
<div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
<input id="f_000000001844977" name="id24" value="" /></div>
</fieldset>

Bootstrap drop down with check box(s) allowing for multiple check boxes instead of just one

I have a Bootstrap drop down menu that allows a user to add a check box next to an item in the drop down list. However, the user is able to add multiple check boxes - the desired behavior is that a user should only be able to select one check box. If a user has selected one check box the other check box should be removed.
$("document").ready(function() {
$('.dropdown-menu').on('click', function(e) {
if($('.checkbox').count() > 1){
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
}
});
});
.dropdown-menu-form {
padding: 5px 10px 0;
max-height: 100px;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#">
Toggle dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 1
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 2
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox">Checkbox 3
</label>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I tried to implement something with the count of the number of klass of .checkbox however that did not work. I am just looking to have the behavior if the user clicks a check box the previous check box will be removed.

Checkboxes are created to allow multiple checks, think of it as you can have this, that, and that. You are looking for a radio button. Radio buttons are treated as a you get this or you get that.
Try This
<li>
<label class="radio-btn">
<input type="radio">
Radio 1
</label>
</li>
JS
$("document").ready(function() {
$('.dropdown-menu').on('click', function(e) {
if($('.radio-btn').count() > 1){
if($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
}
});
});

Not being able to pre-select desired radio box by default

I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>

It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)

The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?

How to dynamically display form fields when a radio button is clicked this way

I have three radio button choices for a question on a form. I want to achieve this effect with jquery: Based on which radio button was clicked, I want to show its associated form fields which are required for that radio button selection.
HTML:
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="ltr" class="ss-item ss-item-required ss-radio">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_594986466">
<div class="ss-q-title">Are you doing this for major requirements or class credit?
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="ss-required-asterisk" aria-hidden="true">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
</label>
<ul class="ss-choices" role="radiogroup" aria-label="Are you doing this for major requirements or class credit? ">
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Major requirements" id="group_817382212_1" role="radio" class="ss-q-radio" aria-label="Major requirements" required="" aria-required="true"></span>
<span class="ss-choice-label">Major requirements</span>
</label>
</li>
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Class credit" id="group_817382212_2" role="radio" class="ss-q-radio" aria-label="Class credit" required="" aria-required="true"></span>
<span class="ss-choice-label">Class credit</span>
</label>
</li>
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="neither, just want to help out!" id="group_817382212_3" role="radio" class="ss-q-radio" aria-label="neither, just want to help out!" required="" aria-required="true"></span>
<span class="ss-choice-label">neither, just want to help out!</span>
</label>
</li>
</ul>
<div id="majorreq_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classnametoggle">
<div dir="ltr" class="ss-item ss-text">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_2016813698">
<div class="ss-q-title">If for class credit, which class is it for?</div>
<div class="ss-q-help ss-secondary-text" dir="ltr">ex HDFS 395C</div>
</label>
<input type="text" name="whichclass" value="" class="ss-q-short" id="whichclass_input" dir="auto" aria-label="If for class credit, what class is it for? ex HDFS 395C Must contain " pattern=".*.*" title="Must contain ">
<div id="whichclass_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classhourstoggle">
<div dir="ltr" class="ss-item ss-text">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1438442595">
<div class="ss-q-title">And how many hours are required?</div>
<div class="ss-q-help ss-secondary-text" dir="ltr">enter only numbers</div>
</label>
<input type="number" name="classhours" value="" class="ss-q-short" id="classhours_input" dir="auto" aria-label="How many hours are required for you to complete? State it in numbers Must be a number greater than 0" step="any" title="Must be a number greater than 0">
<div id="classhours_valid" style="display:none;color:rgb(196,59,29);">Please enter a number</div>
<div id="classhours_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
The three radio button choices have an id equal to "majorreq". If the radio button for "Class credit" is selected then it should show the fields with div id's of "classnametoggle" and "classhourstoggle". It should hide these fields when the page initially loads.
How can I do this? I have searched far and wide on google but I am very confused as I am only a beginner to javascript programming. Any help would be greatly appreciated.

I think this is what you want, try put this into your js section script, hope this helpes.
Explanation
- When radio button(Class credit) was clicked, then the div with id classnameotggle and classhourstoggle should appear, right?
<script>
$(document).ready(function(){
$('#classhourstoggle, #classnametoggle').hide();
$('input[type=radio]').on('click', function(){
var radio_value = $(this).val();
if(radio_value=="Class credit")
{
$('#classhourstoggle, #classnametoggle').show();
}
else
{
$('#classhourstoggle, #classnametoggle').hide();
}
});
});
</script>

Try something like this:
$(".radio").on("click", function() {
var target = $(this).data("target");
$(".form-group").hide().filter("[data-target=" + target + "]").show();
});
.form-group {
display: none;
}
<form>
<input type="radio" class="radio" data-target="form1" />
<input type="radio" class="radio" data-target="form2" />
<input type="radio" class="radio" data-target="form3" />
<div class="form-group" data-target="form1">
</div>
<div class="form-group" data-target="form2">
</div>
<div class="form-group" data-target="form3">
</div>
</form>
Basically what you are doing is using the data attribute as a way to manage the relationship between radio button and DOM content. When you click a radio button, it hides all of the forms, only showing the relevant one.
You just need to add data attributes (like I have) or classes on your radio buttons and the wrappers around their related forms.