Changing accordion so only closes when header is clicked - javascript

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>

Related

With SweetAlert2 how can I get the title and text on separate lines with a Toast alert?

I would like to be able to use SweetAlert2 for my "growl" notifications on my website. I am using the Toast option and it works perfect. However, I would like to get the Title and Text each on their own lines and not inline.
UPDATE:
So I've inspected the element and it is using inline flex. Below is the output code of the alert:
<div class="swal2-container swal2-top-end swal2-fade swal2-shown" style="overflow-y: auto;">
<div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-toast swal2-show" tabindex="-1" role="alert" aria-live="polite" style="display: flex;">
<div class="swal2-header">
<ul class="swal2-progress-steps" style="display: none;"></ul>
<div class="swal2-icon swal2-error" style="display: none;"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span>
</div>
<div class="swal2-icon swal2-question" style="display: none;"></div>
<div class="swal2-icon swal2-warning" style="display: none;"></div>
<div class="swal2-icon swal2-info" style="display: none;"></div>
<div class="swal2-icon swal2-success swal2-animate-success-icon" style="display: flex;">
<div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div><span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
<div class="swal2-success-ring"></div>
<div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
<div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
</div><img class="swal2-image" style="display: none;">
<h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>
<button type="button" class="swal2-close" aria-label="Close this dialog" style="display: none;">×</button>
</div>
<div class="swal2-content">
<div id="swal2-content" style="display: block;">You are now logged in!</div>
<input class="swal2-input" style="display: none;">
<input type="file" class="swal2-file" style="display: none;">
<div class="swal2-range" style="display: none;">
<input type="range">
<output></output>
</div>
<select class="swal2-select" style="display: none;"></select>
<div class="swal2-radio" style="display: none;"></div>
<label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
<input type="checkbox"><span class="swal2-label"></span></label>
<textarea class="swal2-textarea" style="display: none;"></textarea>
<div class="swal2-validation-message" id="swal2-validation-message"></div>
</div>
<div class="swal2-actions" style="display: none;">
<button type="button" class="swal2-confirm swal2-styled" aria-label="" style="display: none; border-left-color: rgb(48, 133, 214); border-right-color: rgb(48, 133, 214);">OK</button>
<button type="button" class="swal2-cancel swal2-styled" aria-label="" style="display: none;">Cancel</button>
</div>
<div class="swal2-footer" style="display: none;"></div>
</div>
</div>
The header code is:
<h2 class="swal2-title" id="swal2-title" style="display: flex;">Welcome!</h2>
and the text code is:
<div class="swal2-content">
<div id="swal2-content" style="display: block;">You are now logged in!</div>
<input class="swal2-input" style="display: none;">
<input type="file" class="swal2-file" style="display: none;">
<div class="swal2-range" style="display: none;">
<input type="range">
<output></output>
</div>
<select class="swal2-select" style="display: none;"></select>
<div class="swal2-radio" style="display: none;"></div>
<label for="swal2-checkbox" class="swal2-checkbox" style="display: none;">
<input type="checkbox"><span class="swal2-label"></span></label>
<textarea class="swal2-textarea" style="display: none;"></textarea>
<div class="swal2-validation-message" id="swal2-validation-message"></div>
</div>
With the main text part being:
<div id="swal2-content" style="display: block;">You are now logged in!</div>
Hope this helps.
This is what it outputs:
This is how I would like it to look:
UPDATE 2:
Thanks to the help from alekstrust, I now have code that does what I need. Below is the full CSS I used:
.swal2-container .swal2-popup.swal2-toast {
flex-direction: column;
align-items: start;
position: relative;
}
.swal2-container .swal2-icon {
position: absolute;
top: 50%;
margin-top: -20px !important;
}
.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
margin-left: 50px;
text-align: left;
}
These styles would do part of the job:
.swal2-container .swal2-popup.swal2-toast {
flex-direction: column;
align-items: start;
}
.swal2-container .swal2-popup.swal2-toast .swal2-content {
margin-left: 50px;
}
Not the best icon alignment, though.
Update
This will do a better job:
.swal2-container .swal2-popup.swal2-toast {
flex-direction: column;
align-items: start;
position: relative;
}
.swal2-container .swal2-icon {
position: absolute;
top: 13px;
}
.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-content {
margin-left: 50px;
}
See https://codepen.io/alekstrust/pen/dybJXMo
You can always use the html parameter to achieve the custom look:
Swal.fire({
type: 'success',
html: `
<div style="text-align: left; margin-left: 10px">
<strong>Welcome!</strong><br>
You are now logged in!
</div>`,
toast: true,
showConfirmButton: false
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
This CSS fixes the toasts, but doesn't affect the popups...
.swal2-container .swal2-toast {
flex-direction: column;
align-items: start;
position: relative;
min-height: 57px;
}
.swal2-container .swal2-toast .swal2-icon {
position: absolute;
top: 9px;
}
.swal2-container .swal2-toast .swal2-title,
.swal2-container .swal2-toast .swal2-content {
margin-left: 50px;
text-align: left;
}

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().

align all the text boxes in same vertical position

How can I make align all the textboxes align in same vertical position?
My textboxes are starting just after the label is completed. The textboxes are following the width of the label.
It is also to be noted that all the labels are left justified. Can I do this without using tables, just only html and css?
Code ::
<div style="width: 100%; font-family: Arial,Helvetica, sans-serif;">
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Previous Password:</b>
<asp:TextBox ID="txt_prev_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>New Password:</b>
<asp:TextBox ID="txt_new_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Retype Password:</b>
<asp:TextBox ID="txt_re_pwd" runat="server" />
</div>
</div>
</div>
You can add to b tag CSS styles:
b{
display: inline-block;
width: 150px;
}
I recommend change <b> tag on <label>, add a class name, and then style it.
you can use this code:
.fields{display:table}
.fields-row{display: table-row;}
.fields-row b{display: table-cell}
<div class="fields">
<div class="fields-row">
<b>Previous Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>New Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>Retype Password:</b>
<input type=text />
</div>
</div>
</div>
Try wrapping each line in a separate div that specifies the width and use the CSS property float, text-align and align
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #1</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #2 Blah</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Here's field #3</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
Although Whitcik response is pretty accurate, I would prefeer using relative width:
b{
display: inline-block;
max-width: 75%;
min-Width: 20%;
}
This way, you can test in different widths keeping stable the aspect ratio (mobile devices). This is just ANOTHER solution. Whitcik is completely right with his response ;)

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);
});

Twitter-Bootstrap drop down log in closes when text areas are clicked

Hi I'm designing a website with JQuery for the first time. I am using Twitter-Bootstrap for a dropdown login box and I can't get the JQuery script right to make the box stay open when you click on the text area. I've tried everything and I am familiar with java script. I placed the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"</script>
at the top of the header as well as before the closing body bracket, and the following in front of the closing body tag as well...
<script>$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
here is the HTML
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li id="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 15px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div></li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>
and the CSS
#top-bar {
width: 100%;
min-height: 35px;
max-height: 35px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#top-buttons{
line-height:10px !important;
}
#top-bar a {
color: #74777c;
}
#top-bar a:hover,
#top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#dashboard-top-bar {
width: 100%;
min-height: 45px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#dashboard-top-bar a {
color: #74777c;
}
#dashboard-top-bar a:hover,
#dashboard-top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#top-info,
#top-buttons {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#top-info,
#top-buttons li {
display: inline-block;
margin-left: 25px;
}
#top-buttons {
float: right;
}
#top-buttons .divider {
position: relative;
border-left: 1px solid #74777c;
width: 1px;
height: 22px;
overflow: hidden;
margin-bottom: -6px;
}
You don't need any jquery to do this. include bootstrap.js and bootstrap.css then
Try this code.
Ex:- JS FIDDLE
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li class="dropdown">
<i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a>
<ul id="login-dp" class="dropdown-menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>

Categories