We Keep Coding

Changing accordion so only closes when header is clicked

I've got a simple few accordions that are made interactive with vanilla JS. They open perfectly, however once they're open if you click anywhere in the div then they close. I know this is happening because of the following line:
var allPanelElems = accordionElem.querySelectorAll(".checkout-accordion");
However, I'm scratching my head as to how to rephrase the JavaScript so they only close when you click on the accordion header, and not the accordion body too.
Here's the full code:
function initAccordion(accordionElem){
function handlePanelClick(event){
showPanel(event.currentTarget);
}
function showPanel(panel){
let expandedPanel = accordionElem.querySelector(".active");
if (panel === expandedPanel){
expandedPanel.classList.remove("active");
} else {
panel.classList.add("active");
}
}
var allPanelElems = accordionElem.querySelectorAll(".checkout-accordion");
for (var i = 0, len = allPanelElems.length; i < len; i++){
allPanelElems[i].addEventListener("click", handlePanelClick);
}
showPanel(allPanelElems[0])
}
initAccordion(document.getElementById("checkout-details-container"));
.checkout-details-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#checkout-details-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
margin: 50px 0;
}
.checkout-accordion {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
margin: 50px 0;
}
.accordion-header {
height: 10vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #f9f9f9;
cursor: pointer;
}
.accordion-dropdown {
height: auto;
width: 50%;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 30px 0;
}
.accordion-dropdown label {
height: 40px;
width: 100%;
margin: 10px 0;
font-size: 24px;
font-weight: bold;
}
.accordion-dropdown input {
height: 40px;
width: 100%;
margin: 20px 0;
font-size: 22px;
color: #999;
background-color: #f9f9f9;
}
/* Start of checkout details accordion functionality */
#checkout-details-container .accordion-dropdown {
display: none;
}
#checkout-details-container .active .accordion-dropdown {
display: flex;
}
<!-- Checkout Details Section -->
<section class="checkout-details-section">
<div id="checkout-details-container">
<div class="checkout-accordion active"> <!-- Personal Details -->
<div class="accordion-header">
<h1>Personal Details</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="fullName">Full name</label>
<input type="text" name="fullName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<label for="phone">Enter your phone number</label>
<input type="tel" name="phone" value="">
</div>
</div>
<div class="checkout-accordion"> <!-- Shipping Address -->
<div class="accordion-header">
<h1>Shipping Address</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="firstLine">House number and street name</label>
<input type="text" name="firstLine" value="">
<label for="secondLine">Enter your local area</label>
<input type="text" name="secondLine" value="">
<label for="city">Enter your city</label>
<input type="text" name="city" value="">
<label for="region">Enter your region</label>
<input type="text" name="region" value="">
<label for="postcode">Enter your postcode</label>
<input type="text" name="postcode" value="">
<label for="country">Enter your country</label>
<input type="text" name="country" value="">
</div>
</div>
<div class="checkout-accordion"> <!-- Billing Address -->
<div class="accordion-header">
<h1>Billing Address</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="billingFirst">House number and street name</label>
<input type="text" name="billingFirst" value="">
<label for="billingSecond">Enter your local area</label>
<input type="text" name="billingSecond" value="">
<label for="billingCity">Enter your city</label>
<input type="text" name="billingCity" value="">
<label for="billingRegion">Enter your region</label>
<input type="text" name="billingRegion" value="">
<label for="billingPostcode">Enter your postcode</label>
<input type="text" name="billingPostcode" value="">
<label for="billingCountry">Enter your country</label>
<input type="text" name="billingCountry" value="">
</div>
</div>
<div class="checkout-accordion"> <!-- Payment Details -->
<div class="accordion-header">
<h1>Payment Details</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="cardNumber">Enter your card number</label>
<input type="text" name="cardNumber" value="">
<label for="expiryDate">Enter your card's expiry date</label>
<input type="date" name="expiryDate" placeholder="DD / YYYY" required pattern="[0-9]{4}-[0-9]{2}" value="">
<label for="csv">Enter your card's CSV</label>
<input type="text" name="csv" placeholder="123" require pattern="[0-9]{4}" value="">
</div>
</div>
</div>
</section>
Weirdly too, it only happens on the second click on the accordion, not the first. There's another weird bug which means if two accordions are open, the first accordion won't close on click until you close the second. If anyone has any idea why that's happening, an answer would be great too.
Thanks, hopefully my questions clear. 😊

You could conditionally handle the panel click event by checking if it's coming from the header (as you want). Your JavaScript should be looking somewhat like:
function initAccordion(accordionElem) {
function handlePanelClick(event) {
// if the event is coming from the header then show panel
if (event.path[0].classList[0] === "accordion-header"){
showPanel(event.currentTarget);
}
}
function showPanel(panel) {
let expandedPanel = accordionElem.querySelector(".active");
if (panel === expandedPanel) {
expandedPanel.classList.remove("active");
} else {
panel.classList.add("active");
}
}
var allPanelElems = accordionElem.querySelectorAll(".checkout-accordion");
for (var i = 0, len = allPanelElems.length; i < len; i++) {
allPanelElems[i].addEventListener("click", handlePanelClick);
}
showPanel(allPanelElems[0]);
}
initAccordion(document.getElementById("checkout-details-container"));
.checkout-details-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#checkout-details-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
margin: 50px 0;
}
.checkout-accordion {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
margin: 50px 0;
}
.accordion-header {
height: 10vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #f9f9f9;
cursor: pointer;
}
.accordion-dropdown {
height: auto;
width: 50%;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 30px 0;
}
.accordion-dropdown label {
height: 40px;
width: 100%;
margin: 10px 0;
font-size: 24px;
font-weight: bold;
}
.accordion-dropdown input {
height: 40px;
width: 100%;
margin: 20px 0;
font-size: 22px;
color: #999;
background-color: #f9f9f9;
}
/* Start of checkout details accordion functionality */
#checkout-details-container .accordion-dropdown {
display: none;
}
#checkout-details-container .active .accordion-dropdown {
display: flex;
}
<!-- Checkout Details Section -->
<section class="checkout-details-section">
<div id="checkout-details-container">
<div class="checkout-accordion active"> <!-- Personal Details -->
<div class="accordion-header">
<h1>Personal Details</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="fullName">Full name</label>
<input type="text" name="fullName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<label for="phone">Enter your phone number</label>
<input type="tel" name="phone" value="">
</div>
</div>
<div class="checkout-accordion"> <!-- Shipping Address -->
<div class="accordion-header">
<h1>Shipping Address</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="firstLine">House number and street name</label>
<input type="text" name="firstLine" value="">
<label for="secondLine">Enter your local area</label>
<input type="text" name="secondLine" value="">
<label for="city">Enter your city</label>
<input type="text" name="city" value="">
<label for="region">Enter your region</label>
<input type="text" name="region" value="">
<label for="postcode">Enter your postcode</label>
<input type="text" name="postcode" value="">
<label for="country">Enter your country</label>
<input type="text" name="country" value="">
</div>
</div>
<div class="checkout-accordion"> <!-- Billing Address -->
<div class="accordion-header">
<h1>Billing Address</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="billingFirst">House number and street name</label>
<input type="text" name="billingFirst" value="">
<label for="billingSecond">Enter your local area</label>
<input type="text" name="billingSecond" value="">
<label for="billingCity">Enter your city</label>
<input type="text" name="billingCity" value="">
<label for="billingRegion">Enter your region</label>
<input type="text" name="billingRegion" value="">
<label for="billingPostcode">Enter your postcode</label>
<input type="text" name="billingPostcode" value="">
<label for="billingCountry">Enter your country</label>
<input type="text" name="billingCountry" value="">
</div>
</div>
<div class="checkout-accordion"> <!-- Payment Details -->
<div class="accordion-header">
<h1>Payment Details</h1>
<i class="fas fa-chevron-down"></i>
</div>
<div class="accordion-dropdown">
<label for="cardNumber">Enter your card number</label>
<input type="text" name="cardNumber" value="">
<label for="expiryDate">Enter your card's expiry date</label>
<input type="date" name="expiryDate" placeholder="DD / YYYY" required pattern="[0-9]{4}-[0-9]{2}" value="">
<label for="csv">Enter your card's CSV</label>
<input type="text" name="csv" placeholder="123" require pattern="[0-9]{4}" value="">
</div>
</div>
</div>
</section>

how to remove # in url when modal popup and submitted

Got a problem here.
I have a modal and when i open it using my code, my url extension extends like having this #mymodalid .
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
if ($('#modal1 :checkbox:checked').length > 1) {
$('input[name=txt1]').val('multiple');
} else {
$('input[name=txt1]').val($('#modal1 :checkbox:checked').prev('label').text());
}
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
What I need to do is that:
Show the modal as it needs on my program.
Checked some checkbox
Close the modal but on the url, #mymodalid should be remove once close.
Even if i closed the modal, what i was checked should be retain
I need to remove #mymodalid because when i redirected to the page itself upon submission, the modal will popup because of that #
Anyone, please help me.

Add a callback to your hide() functions:
$('#modal1').hide(400, removeHashFromUrl());
function removeHashFromUrl()
{
window.location.hash = '';
}
Or you could just just inline the callback, but it's obviously reusable in a function:
$('#modal1').hide(400, function(){window.location.hash = '';});
PS: 400 is the default speed for jQuery's hide().

$(document).on("change") not fire up on Mozilla Firefox

I have an issue with radio button and jquery. The onchange is working in Chrome but is not working in Mozilla Firefox. I put a breakpoint on the line below on Chrome and the browser is debugging normally, but when I am on Mozilla, this onchange never fires up
$(document).on("change", 'input[type="radio"]', function () {//code for doing something}
My HTML code is
<div id="tab-Pcy-2041" class="tab-pane active">
<div class="radio radio-small">
<label class="">
<div class="i-radio checked">
<input class="i-radio" data-ano="1" data-chno="0"
data-adce="0" data-chce="0" data-for="rbtncy"
xname="rbcy204" name="rbtncy2040" value="22038"
checked="checked" style="position: absolute; opacity: 0;" type="radio" />
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%;
display: block; width: 100%; height: 100%; margin: 0px; padding: 0px;
background: rgb(255, 255, 255) none repeat scroll 0% 0%; border:
0px none; opacity: 0;">
</ins>
</div>
test
</label>
</div>
<div class="radio radio-small">
<label class="">
<div class="i-radio">
<input class="i-radio" data-ano="1" data-chno="0"
data-ace="15" data-chce="15"
data-for="rbtncy" xname="rbtncy204"
name="rbtncy2040" value="22039"
style="position: absolute; opacity: 0;" type="radio" />
<ins class="iCheck-helper" style="position:
absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%;
margin: 0px; padding: 0px; background: rgb(255, 255, 255)
none repeat scroll 0% 0%; border: 0px none; opacity: 0;">
</ins>
</div>
test33:
<span class="ItemtestClass" data-itemce="15">
<span class="CurrencySymbolClass">€</span>
<span class="Itce"> 15</span>
</span>
Cd:
<span class="ItemtestClass" data-itemce="15">
<span class="CurrencySymbolClass">€</span>
<span class="Itemce"> 15</span>
</span>
</label>
</div>
</div>

With minimal markup and script you can refer to the working snippet below
$(document).on("change","input[type=radio]", function(){
console.log($(this).prop("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rd1" id="option1" /><label for="option1">Option 1</label><br />
<input type="radio" name="rd1" id="option2" /><label for="option2">Option 2</label><br />
<input type="radio" name="rd1" id="option3" /><label for="option3">Option 3</label><br />

How to make a radio appear as the header? Also how do I get the radio to decide the next box?

I have been struggeling quite a while trying to figure out how to get the radio selected to show up in the header. Example: Let's say I click Baden-Wurttemberg, how can I get it to say Baden-Wurttemberg where it currently says province?
Also, in other to advance further, when you click Baden-Wurttemberg, it would be desirable to get the regions within that bundesland (province) to come up as the next option as you move on to the next box. Example: If you want to find Munich, you should be able to click on Bavaria and move on to the next box having Munich as an option.
I would appreciate it a lot if anyone could share their knowlegde!
label {
display: inline-block;
color: black;
padding: 5px;
}
input[type="radio"] {
vertical-align: bottom;
}
.menu-container {
width:100%;
margin: 0 auto;
padding: 0 0;
}
.menu {
width:100%;
font-family: Verdana, Geneva, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 15px;
position: relative;
padding: 0 0 0 4px;
margin: 0;
background-color: white;
}
.menu a, .menu a:link, .menu a:visited, .menu a:focus, span {
color: #23255e;
text-decoration: none;
}
.menu a:hover {
color: #23255e;
text-decoration: none;
}
.menu > li {
display: inline-block;
text-align: center;
margin-left: -15px;
border-left: 0px solid rgba(255, 255, 255, 0.11);
box-shadow: -0px 0 0 rgba(0, 0, 0, 0.1);
}
.menu > li > a {
padding:20px 140px;
display: block;
}
.menu > li:hover > a {
color: white;
}
.menu > li:hover {
background-color: #23255e;
}
/* Megadrop width dropdown */
.menu > li > .megadrop {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:53px;
left: 0px;
width: 70%;
min-height: 100px;
text-align: left;
margin-top:30px;
padding-left: 50px;
padding-top: 5px;
padding-bottom: 10px;
z-index: 99;
overflow: hidden;
border-left: 1px solid #23255e;
border-right: 1px solid #23255e;
border-bottom: 1px solid #23255e;
}
.menu > li:hover .megadrop {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
.menu ul li:hover:after {
color: #23255e;
}
.menu .col {
width: 14.1%;
float: left;
color:white;
margin: 0 0 0 ;
}
.menu .col ul {
padding: 0;
margin: 0;
}
.menu .col ul li {
padding: 0;
list-style: none;
font-size: 11px;
}
.menu .col h3 {
font-size: 16px;
padding: 10px 0;
font-weight: bold;
margin: 5px 0 5px 0;
color: #23255e;
background: white;
}
.menu .col ul li a {
display: block;
padding: 0 0 15px 0;
color: #23255e;
}
.menu .col ul li a:hover {
color: #111;
text-decoration: none;
}
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > ul, .menu > li {
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-outs;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="euprop.css">
</head>
<body>
<div>
<ul class="menu">
<li class="dropdown">Province
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_1"><input type="radio" name="radio" id="radio_1" />Berlin</label>
</li>
<li><label for="radio_2"><input type="radio" name="radio" id="radio_2" />Bremen</label>
</li>
<li><label for="radio_3"><input type="radio" name="radio" id="radio_3" />Hamburg</label>
</li>
</ul>
</div>
<div class="col">
<h3>Provinces</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Bavaria</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Hesse</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Mecklenburg</label>
</li>
<li><label for="radio_8"><input type="radio" name="radio" id="radio_8" />Lower Saxony</label>
</li>
<li><label for="radio_9"><input type="radio" name="radio" id="radio_9" />North Rhine-Westphalia</label>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><label for="radio_10"><input type="radio" name="radio" id="radio_10" />Rhineland-Palatinate</label>
</li>
<li><label for="radio_11"><input type="radio" name="radio" id="radio_11" />Saarland</label>
</li>
<li><label for="radio_12"><input type="radio" name="radio" id="radio_12" />Saxony</label>
</li>
<li><label for="radio_13"><input type="radio" name="radio" id="radio_13" />Saxony-Anhalt</label>
</li>
<li><label for="radio_14"><input type="radio" name="radio" id="radio_14" />Schleswig-Holstein</label>
</li>
<li><label for="radio_15"><input type="radio" name="radio" id="radio_15" />Thuringia</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown"> Region
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_16"><input type="radio" name="radio" id="radio_16" />Baden-Baden</label>
</li>
<li><label for="radio_17"><input type="radio" name="radio" id="radio_17" />Freiburg</label>
</li>
<li><label for="radio_18"><input type="radio" name="radio" id="radio_18" />Heidelberg</label>
</li>
<li><label for="radio_19"><input type="radio" name="radio" id="radio_19" />Heilbronn</label>
</li>
<li><label for="radio_20"><input type="radio" name="radio" id="radio_20" />Karlsruhe</label>
</li>
<li><label for="radio_21"><input type="radio" name="radio" id="radio_21" />Mannheim</label>
</li>
</ul>
</div>
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_22"><input type="radio" name="radio" id="radio_22" />Pforzheim</label>
</li>
<li><label for="radio_23"><input type="radio" name="radio" id="radio_23" />Stuttgart</label>
</li>
<li><label for="radio_24"><input type="radio" name="radio" id="radio_24" />Ulm</label>
</ul>
</div>
<div class="col">
<h3>Regions</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Freiburg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Karlsruhe</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Stuttgart</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Tubingen</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">District
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_1"><input type="radio" name="radio" id="radio_1" />Berlin</label>
</li>
<li><label for="radio_2"><input type="radio" name="radio" id="radio_2" />Bremen</label>
</li>
<li><label for="radio_3"><input type="radio" name="radio" id="radio_3" />Hamburg</label>
</li>
</ul>
</div>
<div class="col">
<h3>Provinces</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Bavaria</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Hesse</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Mecklenburg</label>
</li>
<li><label for="radio_8"><input type="radio" name="radio" id="radio_8" />Lower Saxony</label>
</li>
<li><label for="radio_9"><input type="radio" name="radio" id="radio_9" />North Rhine-Westphalia</label>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><label for="radio_10"><input type="radio" name="radio" id="radio_10" />Rhineland-Palatinate</label>
</li>
<li><label for="radio_11"><input type="radio" name="radio" id="radio_11" />Saarland</label>
</li>
<li><label for="radio_12"><input type="radio" name="radio" id="radio_12" />Saxony</label>
</li>
<li><label for="radio_13"><input type="radio" name="radio" id="radio_13" />Saxony-Anhalt</label>
</li>
<li><label for="radio_14"><input type="radio" name="radio" id="radio_14" />Schleswig-Holstein</label>
</li>
<li><label for="radio_15"><input type="radio" name="radio" id="radio_15" />Thuringia</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">Municapality
<div class="megadrop">
<div class="col">
<h3>Title</h3>
<ul>
<li>Sub-menu 1
</li>
<li>Sub-menu 2
</li>
<li>Sub-menu 3
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li>Sub-menu 1
</li>
<li>Sub-menu 2
</li>
<li>Sub-menu 3
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li>Sub-menu 1
</li>
<li>Sub-menu 2
</li>
<li>Sub-menu 3
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li>Sub-menu 1
</li>
<li>Sub-menu 2
</li>
<li>Sub-menu 3
</li>
</ul>
</div>
</div>
</li>
</li>
</ul>
</div>
</body>
</html>

I am no expert but i would say you may need to add a "onclick=" to the input and a function that maybe uses a .innerHTML to push the value from the radio button into the heading, your heading will need an id also like: <h3 id="provincesAnswer">Provinces</h3>
The function will need to take into account that all the radios are point at the heading, so you may need to go inline (i am sure someone else would have an easier way but as i said i am no expert).
So the radio may look like:
<input type="radio" name="radio" id="radio_4" onclick="check(this.value)" value="Baden-Wurttemberg">Baden-Wurttemberg
So to simplify what i mean
here is the script:
<script>
function check(provincesValue) {
document.getElementById("provincesAnswer").value=provincesValue;
}
</script>
And Your Heading:
<h3 type="text" id="provincesAnswer">Provinces</h3>
And A Few Radio buttons for example:
<li><label for="radio_4"><input type="radio" name="provincesValue" id="radio_4" onclick="check(this.value)" value="Baden-Wurttemberg" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="provincesValue" id="radio_5" onclick="check(this.value)" value="Bavaria" />Bavaria</label>
</li>
Hope this helps

Clear checkbox button not working

I have a CLEAR button. The aim of that CLEAR button is that when a user clicks the button, all selected checkbox values are removed. Thats it. Now somehow I managed to get a checkbox with the CLEAR button (seemed for me the only way), and also upon clicking then all checkbox values are selected and when clicking again all checkbox values are removed. Is it possible to get only the button and then just one click for just removal of selected checkboxes? My current code only works for the first filter-menu BRAND, but for the others it does not work, I cant figure out why.
Here my BOOTPLY - BOOTPLY
$("#clear").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
/* CSS used here will be applied after bootstrap.css */
/* FILTER_datafeed */
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
/* Filter-menu APPLY and CLEAR */
.select_filter > .multi_select_container > .div_form > .btn_apply {
border-right: 1px solid #e6e6e6;
box-sizing: border-box;
display: inline-block;
float: left;
padding: 10px 16px 10px 17px;
text-align: center;
width: 50%;
}
.select_filter > .multi_select_container > .div_form > .btn_clear.disabled, .select_filter > .multi_select_container > .div_form > .btn_clear[disabled], .select_filter > .multi_select_container > .div_form > .btn_clear[disabled]:hover {
background-color: transparent;
color: #ccc;
}
.select_filter > .multi_select_container > .div_form > .btn_clear {
box-sizing: border-box;
display: inline-block;
float: right;
padding: 10px 17px;
text-align: center;
width: 50%;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
width:100%;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
/* Type-ahead plugin */
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
/* Type-ahead plugin END */
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">Brand</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Primary buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Colour</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Eins</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Zwei
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Drei</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Vier</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fünf</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sechs
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Info buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-info" type="button">Merchant</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> First value</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Second option
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Third choice</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fourth alternative</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifth decision</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sixt focus
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-danger" type="button">Price</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Value-1</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-2
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-3</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-4</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-5</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-6
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->

Man you are using the same ID four times. The ID selector always return a single element, in your case you are only attaching the event to the first input with the id #clear so it will be working ONLY on the first clear button. Use a class instead and somehow scope the changes to affect only the related checkboxes.
Change the IDs to classes and use the following:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', $(this).prop("checked"));
});
Working example
To make sure the clear button always clear the selection, you should always set the property checked to false like this:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', false);
});
Updated example

It's only working for the first menu because an id is suppose to be unique. You are actually only applying an event listener to the first #clear element. In addition, you are toggling the checked property of all the checkboxes, not just the checkboxes in that dropdown menu.
Change the id attribute to a class, in this case, .clear, and when the change event is fired, select the closest .dropdown-menu element and toggle all the descendant checkbox elements:
Updated Example
$(".clear").on('change', function () {
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', this.checked);
});
You could also just remove the checkbox and attach a click event to the .btn_clear element. You will also need to stop the event propagation in order to prevent the dropdown element from closing:
Updated Example
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});