Problem
I am trying to create a double filter, where you can combine filters from multiple categories. For example, first category of filters are years, and the second one types of media. I want to make so that you can filter only through the years, media type or both year x type of media (Music form the 1960s). Also, I'm trying to keep selected filters highlighted, somehow so you can keep track of which ones are active (I tried to make them bold, and it works for first set of filters, but fails for the second. How do I solve this problem?
Codepen
https://codepen.io/erutuf/pen/ZPwdBq
Attempt
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.filterDiv {
float: left;
background-color: white;
color: black;
width: 37vw;
line-height: 100px;
text-align: center;
margin: 5px;
display: none;
margin-right: 15px;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 0;
padding-right: 40px;
background-color: white;
cursor: pointer;
font-size: 16px;
font-weight: normal;
}
.btn:hover {}
.btn.active {
font-weight: bold;
}
.content {
font-size: 16px;
line-height: 20px;
text-align: left;
}
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<!-- <button class="btn active" onclick="filterSelection('all')"> Show all</button> Show ALL -->
<button class="btn active" onclick="filterSelection('ShowAll')">Show all</button>
<button class="btn" onclick="filterSelection('1950')">1950</button>
<button class="btn" onclick="filterSelection('1960')">1960</button>
<button class="btn" onclick="filterSelection('1970')">1970</button>
</div>
<br>
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<!-- <button class="btn active" onclick="filterSelection('all')"> Show all</button> Show ALL -->
<button class="btn" onclick="filterSelection('AllMedia')">All Media</button>
<button class="btn" onclick="filterSelection('Movies')">Movies</button>
<button class="btn" onclick="filterSelection('Music')">Music</button>
<button class="btn" onclick="filterSelection('Newspapers')">Newspapers</button>
</div>
<br><br>
<div class="filterDiv AllShapes ShowAll 1950 Newspapers">
<div class="content">
1950 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllShapes ShowAll 1960 Music">
<div class="content">
1960 Music Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllShapes ShowAll 1960 Newspapers">
<div class="content">
1960 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
The simplest way would be to use <label> and type="radio" inputs.
You can style the inner <i> element, adjacent (+) to the :checked input.
Store the filter references (props) into a data-filterable="value1 value2 valueZ" space delimited.
The trick is to:
on change event, get the checked inputs values as Array.
Hide all elements (add a .is-hidden class)
get a filtered subset of element to show - based on whether all the checked values are present in the data-filterable props (also as array).
The below example will work for any number of filter-sets:
const el_filters = document.querySelectorAll('[name="year"], [name="type"]'),
el_filterable = document.querySelectorAll('[data-filterable]');
const applyFilter = () => {
// Filter checked inputs
const el_checked = [...el_filters].filter(el => el.checked && el.value);
// Collect checked inputs values to array
const filters = [...el_checked].map(el => el.value);
// Get elements to filter
const el_filtered = [...el_filterable].filter(el => {
const props = el.getAttribute('data-filterable').trim().split(/\s+/);
return filters.every(fi => props.includes(fi))
});
// Hide all
el_filterable.forEach(el => el.classList.add('is-hidden'));
// Show filtered
el_filtered.forEach(el => el.classList.remove('is-hidden'));
}
// Assign event listener
el_filters.forEach(el => el.addEventListener('change', applyFilter));
// Init
applyFilter();
/* FILTER INPUTS */
.filterInputs {
padding-bottom: 5px;
}
.filterInputs input {
display: none;
}
.filterInputs label {
display: inline-block;
position: relative;
padding: 10px 20px;
cursor: pointer;
user-select: none; /* prevent highlight */
}
.filterInputs i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 2px #0bf;
z-index: -1;
}
.filterInputs input:checked + i {
background: #0bf;
}
/* HELPER CLASSES */
.is-hidden {
display: none;
}
<div class="filterInputs">
<label><input type="radio" name="year" value="" checked><i></i>All years</label>
<label><input type="radio" name="year" value="1950"><i></i>1950</label>
<label><input type="radio" name="year" value="1960"><i></i>1960</label>
<label><input type="radio" name="year" value="1970"><i></i>1970</label>
</div>
<div class="filterInputs">
<label><input type="radio" name="type" value=""><i></i>All types</label>
<label><input type="radio" name="type" value="movies"><i></i>Movies</label>
<label><input type="radio" name="type" value="music" checked><i></i>Music</label>
<label><input type="radio" name="type" value="newspapers"><i></i>Newspapers</label>
</div>
<div data-filterable="1950 newspapers">1950 Newspapers</div>
<div data-filterable="1960 music">1960 Music</div>
<div data-filterable="1960 newspapers">1960 Newspapers</div>
I used the attribute selector([filter][group]) for this scenario,
(function(){
const selectedFilters = [];
// [].slice.call => converts HTMLCollection to Array
const yearFilters = [].slice.call(document.querySelectorAll('[filter][group="year"]'));
const mediaFilters = [].slice.call(document.querySelectorAll('[filter][group="media"]'));
const allFilters = yearFilters.concat(mediaFilters);
const filterContents = [].slice.call(document.querySelectorAll('.filterDiv'));
// add click event to all filters
allFilters.forEach((filter) => {
filter.addEventListener('click', filterToggle);
});
function filterToggle() {
const filter = this.getAttribute('filter');
const group = this.getAttribute('group');
resetMediaFilters();
if(group === 'year') {
resetYearFilters();
mediaFilters[0].classList.add('active');
}
this.classList.add('active');
applyFilter();
}
function resetYearFilters() {
yearFilters.forEach(filter => filter.classList.remove('active'));
}
function resetMediaFilters() {
mediaFilters.forEach(filter => filter.classList.remove('active'));
}
function resetFilterContent() {
filterContents.forEach(content => content.classList.remove('show'));
}
function applyFilter() {
const selectedFilters = [].slice.call(document.querySelectorAll('[filter].active'))
.map(filter => filter.getAttribute('filter'));
// class starts with number is a invalid query selector, so using attribute selector for class
const selector = ["filterDiv"].concat(selectedFilters).map(filter => '[class~="'+ filter +'"]').join('');
resetFilterContent();
document.querySelectorAll(selector).forEach(content => content.classList.add('show'));
}
// initialize
applyFilter();
})();
.filterDiv {
float: left;
background-color: white;
color: black;
width: 37vw;
line-height: 100px;
text-align: center;
margin: 5px;
display: none;
margin-right: 15px;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 0;
padding-right: 40px;
background-color: white;
cursor: pointer;
font-size: 16px;
font-weight: normal;
}
.btn:hover {
}
.btn.active {
font-weight: bold;
}
.content{
font-size:16px;
line-height:20px;
text-align:left;
}
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<button class="btn active" filter="ShowAll" group="year">Show all</button>
<button class="btn" filter="1950" group="year">1950</button>
<button class="btn" filter="1960" group="year">1960</button>
<button class="btn" filter="1970" group="year">1970</button>
</div>
<br>
<div id="myBtnContainer" align="center" style="line-height: 20pt">
<button class="btn active" filter="AllMedia" group="media">All Media</button>
<button class="btn" filter="Movies" group="media">Movies</button>
<button class="btn" filter="Music" group="media">Music</button>
<button class="btn" filter="Newspapers" group="media">Newspapers</button>
</div>
<br><br>
<div class="filterDiv AllMedia ShowAll 1950 Newspapers">
<div class="content">
1950 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllMedia ShowAll 1960 Music">
<div class="content">
1960 Music Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="filterDiv AllMedia ShowAll 1960 Newspapers">
<div class="content">
1960 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
You have a document.getElementsByClassName() function in javascript that may help you here.
DOCS: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
You can obtain an array of elements that match the class you want to target and you can then iterate over them to add/remove the hidden property or css class that makes them shown or hide.
The same can be applied for the buttons you want to make bolder.
Pseudocode example:
Click the RED filter
Iterate over all elements on the page and
If it has the RED class, make hidden property = false
Otherwise, make hidden property = true
Then, iterate over all buttons of type COLOUR
If it's the RED button, add it the css class for btn_active
Otherwise, remove the btn_active class
If the button clicked is ALL, the logic is a bit different but it's just a matter of playing with the if-elses.
Remember you also have the addClass and removeClass methods on each element. You don't have to convert the class list to an array of classes and iterate over them. It's much more simpler than that:
https://www.w3schools.com/howto/howto_js_remove_class.asp
Related
I have a 'form' that displays text feedback (2 options) depending on how many checkboxes are selected. In principle this works however I would like to improve the animation/transition of how the text is displayed.
If you select all checkboxes, a p is slide into view. Any other amount you get a separate message which functions the same way. Currently this is 'hardcoded' to 5 checkboxes. Dunno if it's possible to make this more flexible based on a data attribute or something so if in future there's 6 - it's not a whole new block of JS?
But the main goal is when the message is displayed, it slides into view. However if you alter your answer and click 'submit' again, the animation is janky.
So I'd like to improve the transition between the update. I've done this elsewhere where it just slides open the first time (if that's easier) but I can't get it to work on this version.
Other implementation here: https://codepen.io/moy/pen/LYdoEBG
But I'd like both to be consistent if possible. So just a refresh/update/fade will be fine rather than both sliding. Unless it's possible to at least make the page/content below slide/push don't gracefully?
$(".form-feedback .btn").click(function () {
let checkboxes = $(this).parents(".form-feedback").find('input:checked').length
$(this).parents(".form-feedback").find(".form-feedback__reveal p").hide()
if(checkboxes == 5){
$(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200)
}else{
$(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200)
}
});
.hide {
display: none;
}
.label {
display: block;
margin-bottom: 24px;
}
.checkbox {
display: block;
margin-bottom: 12px;
}
.btn {
background: black;
border-radius: 24px;
color: white;
display: inline-flex;
padding: 12px 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxout">
<div class="form-feedback">
<label class="label">HACCP helps a food business to...</label>
<label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label>
<label class="checkbox"><input type="checkbox">Identify critical control points</label>
<label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label>
<label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label>
<label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label>
Submit
<div class="form-feedback__reveal">
<p class="hide" data-feedback="all">That’s right, HACCP supports a business in all of the areas listed.</p>
<p class="hide" data-feedback="some">That’s incorrect, HACCP actually supports a business in all of these areas.</p>
</div>
</div>
</div>
<div class="content">
<h4>Content below to check it gets pushed down smoothly</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
$(".form-feedback .btn").click(async function () {
let checkboxes = $(this).parents(".form-feedback").find('input:checked').length
$(this).parents(".form-feedback").find(".form-feedback__reveal p").slideUp(200)
await new Promise(res => { setTimeout(res, 200); });
$(this).parents(".form-feedback").find(".form-feedback__reveal p").hide()
if(checkboxes == 5){
$(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200)
}else{
$(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200)
}
});
.hide {
display: none;
}
.label {
display: block;
margin-bottom: 24px;
}
.checkbox {
display: block;
margin-bottom: 12px;
}
.btn {
background: black;
border-radius: 24px;
color: white;
display: inline-flex;
padding: 12px 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxout">
<div class="form-feedback">
<label class="label">HACCP helps a food business to...</label>
<label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label>
<label class="checkbox"><input type="checkbox">Identify critical control points</label>
<label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label>
<label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label>
<label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label>
Submit
<div class="form-feedback__reveal">
<p class="hide" data-feedback="all">That’s right, HACCP supports a business in all of the areas listed.</p>
<p class="hide" data-feedback="some">That’s incorrect, HACCP actually supports a business in all of these areas.</p>
</div>
</div>
</div>
<div class="content">
<h4>Content below to check it gets pushed down smoothly</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
This is getting toward the right direction I think. I've added an animation to close the slideDown.
You could also add a check to make sure it doesn't slide up and back down if the text isn't going to change
I think Jess' animation is what you're looking for, so this solution is based on
If you select all checkboxes, a p is slide into view. Any other amount you get a separate message which functions the same way. Currently this is 'hardcoded' to 5 checkboxes. Dunno if it's possible to make this more >flexible based on a data attribute or something so if in future there's 6 - it's not a whole new block of JS?
To ensure the onclick eventlistener on the .btn-element is handled properly, use target.preventDefault(). Seeing as the element is an <a>-element, clicking it will force your screenview to jump to the top. preventDefault() makes sure the viewport stays in place when you click on the link (although making it a <button> or <input type="submit"> is correct semantically and accessibility wise, unless it actually IS a link that will redirect the user)
When you say you want a "dynamic solution", I'm going to assume you want the message that appears when 5 inputs are selected to be shown if all inputs are selected, no matter the amount of input-elements there are.
You already have the variable checkboxes which contains the length of the amount of checkboxes that are checked. Just make a new, very similiar variable that holds the length of the total amount of checkboxes in the form, and in your if-statement, set those two variables to be equal to each other. This way, your message will always show if all of the checkboxes are checked.
$(".form-feedback .btn").click(function(e) {
// remove default behaviour of the <a>
e.preventDefault();
// variables that hold the length of checkboxes
let checkedCheckboxes = $(this).parents(".form-feedback").find('input:checked').length;
let checkboxes = $(this).parents(".form-feedback").find('input').length;
$(this).parents(".form-feedback").find(".form-feedback__reveal p").hide()
if (checkedCheckboxes === checkboxes) {
$(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200)
} else {
$(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200);
}
});
.hide {
display: none;
}
.label {
display: block;
margin-bottom: 24px;
}
.checkbox {
display: block;
margin-bottom: 12px;
}
.btn {
background: black;
border-radius: 24px;
color: white;
display: inline-flex;
padding: 12px 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxout">
<div class="form-feedback">
<label class="label">HACCP helps a food business to...</label>
<label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label>
<label class="checkbox"><input type="checkbox">Identify critical control points</label>
<label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label>
<label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label>
<label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label>
Submit
<div class="form-feedback__reveal">
<p class="hide" data-feedback="all">That’s right, HACCP supports a business in all of the areas listed.</p>
<p class="hide" data-feedback="some">That’s incorrect, HACCP actually supports a business in all of these areas.</p>
</div>
</div>
</div>
<div class="content">
<h4>Content below to check it gets pushed down smoothly</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
I am making a popup where I am trying to show popup on cookie-based, it shows only once when user visit for the first time, also accept and deny button not working on more info button popup as below when we click on more info new popup also come I am trying to hide both on accept, close and all button and set a cookie for showing this popup
I have used this but not working:
if (localStorage.getItem("cookieSeen") != "shown") {
$(".popUp").delay(2000).fadeIn();
localStorage.setItem("cookieSeen","shown")
};
$("#submit").click(function() {
$(".cookie-banner").fadeOut();
});
$(document).ready(function() {
$(".footerr li:last-child").on('click', function(e) {
console.log("in")
e.preventDefault();
$('#popUpContain').css('display', 'none');
$(".serviceMainContent1").css('display', 'block');
})
$("#closeInfoBtn").click(function(e) {
e.preventDefault();
$('#popUpContain').css('display', 'block');
$(".serviceMainContent1").css('display', 'none');
})
$(".cat_btn").click(function(e) {
e.preventDefault();
$(".serv_btn a").css({
"color": "#303030"
});
$(".serv_btn").css({
"border-bottom": "none"
});
$('#services1').css('display', 'none');
$("#category").css('display', 'block');
$(".cat_btn a").css({
"color": "blue"
});
$(".cat_btn").css({
"border-bottom": "2px solid blue"
});
});
$(".serv_btn").click(function(e) {
e.preventDefault();
$(".cat_btn a").css({
"color": "#303030"
});
$(".cat_btn").css({
"border-bottom": "none"
});
$("#category").css('display', 'none');
$('#services1').css('display', 'block');
$(".serv_btn a").css({
"color": "blue"
});
$(".serv_btn").css({
"border-bottom": "2px solid blue"
});
})
var acc = document.getElementsByClassName("accordion1");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
})
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.popUp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: block;
background-color: white;
}
#language {
width: 57px;
padding: 4px;
border: 1px solid #dbdbdb;
}
.header1 {
display: flex;
justify-content: flex-end;
}
.container1,
.serviceMainContent1 {
display: flex;
flex-direction: column;
width: 595px;
padding: 14px;
box-shadow: -1px 16px 34px 2px #dbdbdb;
border-radius: 7px;
}
.bodyy h3 {
color: #303030;
}
.bodyy p {
line-height: 19px;
margin-top: 10px;
font-size: 13px;
}
.footerr>a {
padding: 7px 90px;
border-radius: 9px;
margin: 0px 10px;
}
.footerr>.deny {
background-color: #ededed;
color: #303030;
}
.footerr>.accept {
background-color: #0096FF;
color: #fff;
}
.footerr>.deny:hover {
background-color: #f4f2f2;
}
.footerr>.accept:hover {
background-color: #4eabf7;
}
.footerr>a:hover {
text-decoration: none;
}
.footerr>p {
text-align: center;
padding-top: 10px;
font-size: 12px;
}
.footerr>ul {
display: flex;
list-style: none;
font-size: 13px;
}
.footerr>ul li {
padding-right: 10px;
color: #c4c2c2;
}
/* more information css */
.serviceMainContent1 {
height: 654px;
overflow-y: scroll;
display: none;
}
.header1 a {
font-size: 20px;
width: 40px;
text-align: center;
}
.header1 a:hover {
text-decoration: none;
color: #303030;
}
.categoryServices1 {
height: 436px;
width: 563px;
overflow-y: scroll;
background-color: #f8f7f7;
}
.cat_serv_btn,
.footerBtn {
display: flex;
text-align: center;
}
.cat_serv_btn .cat_btn,
.cat_serv_btn .serv_btn,
.footerBtn a {
width: 50%;
}
.cat_btn,
.serv_btn {
padding: 10px 0px;
}
.cat_btn:active,
.serv_btn:active {
border-bottom: 2px solid blue;
}
.cat_btn a:active,
.serv_btn a:active {
color: blue;
}
.cat_btn a:hover,
.serv_btn a:hover {
text-decoration: none;
}
.bodyy span {
padding: 20px 20px 20px 0;
}
.bodyy a,
.bodyy i {
font-size: 13px;
}
.footerBtn a {
padding: 5px 0px;
border-radius: 5px;
margin: 0px 10px;
color: #303030;
}
.footerBtn a:hover {
text-decoration: none;
}
.footerBtn .save,
.footerBtn .deny {
background-color: #f5f5f5;
}
.footerBtn .save:hover,
.footerBtn .deny:hover {
background-color: #e7e6e6;
}
.footerBtn .close {
background-color: #0096FF;
color: #fff;
}
.footerBtn .close:hover {
background-color: #4eabf7;
}
/* switch buttons */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider1 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider1:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider1 {
background-color: #2196F3;
}
input:focus+.slider1 {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider1:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider1.round {
border-radius: 34px;
}
.slider1.round:before {
border-radius: 50%;
}
/* accordions */
.accordion1 {
margin: 20px 0px;
width: 500px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.accordion1 div p {
font-size: 13px;
}
.accordion1 {
display: flex;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion1:hover {
background-color: #fff;
}
.panel {
padding: 0px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
font-size: 13px;
}
#services1 {
display: none;
}
/* media query for mobile device */
#media only screen and (max-width: 600px) {
.container {
width: 400px;
}
.footerr>a {
padding: 5px 40px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popUp">
<div class="container1" id="popUpContain">
<div class="header1">
<img src="img/logo.png" alt="" width="20">
<div style="margin-right: auto; margin-left: 10px;"><b>BCT-Touristik</b></div>
<!-- <select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
</select> -->
</div>
<div class="bodyy">
<h3>We value your privacy</h3>
<p>We and our partners are using technologies like Cookies or Targeting and process personal data like IP-address or browser information in order to personalize the advertisement you see. This helps us to show you more relevant ads and improves your
internet experience. We also use it in order to measure results or align our website content. Because we value your privacy, we are herewith asking your permission to use the following technologies. You can always change/withdraw your consent
later by clicking on the settings button on the left lower corner of the page.</p>
</div><br>
<div class="footerr">
<ul>
<li><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</li>
<li><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> Travel Condition</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> More information</li>
</ul><br>
<b>Deny</b>
<b>Accept and close</b>
<p>Powered by BCT-Touristik</p>
</div>
</div>
<div class="serviceMainContent1">
<div class="headerBody">
<div class="header1">
<img src="" alt="">
<select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
<option value="PT">PT</option>
</select>
✖
</div>
<div class="bodyy">
<h3>Privacy Settings</h3>
<p>This tool helps you to select and deactivate various tags / trackers / analysis tools used on this website. </p>
<span><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</span>
<span><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</span>
</div>
<div class="cat_serv_btn">
<div class="cat_btn">
<b>Categories</b>
</div>
<div class="serv_btn">
<b>Services</b>
</div>
</div>
<div class="categoryServices1">
<div id="category1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div id="services1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<br>
<div class="footerBtn">
<a class="save" href=""><b>Save</b></a>
<a class="deny" href=""><b>Deny</b></a>
<a class="close" href=""><b>Accept and close</b></a>
</div>
<p>Powered by Usercentrics Consent Management</p>
</div>
</div>
</div>
</div>
</div>
Using js-cookie, you could create a function to handle this logic.
import * as Cookies from 'js-cookie';
function initCookiesPopup() {
window.acceptsCookies = Cookies.get('acceptsCookies');
if (window.acceptsCookies != null) {
// The user has already clicked accept / reject
$('.popUp').remove();
return;
}
// The user has not accepted or rejected cookies
$('.popUp').show()
}
function acceptCookies() { closeCookiesAlert(true) }
function rejectCookies() { closeCookiesAlert(true) }
function closeCookiesAlert(accepted) {
Cookies.set('acceptsCookies', accepted);
window.acceptsCookies = accepted;
$('.popUp').remove();
}
// Initialize popup
initCookiesPopup();
From there you can call acceptCookies() and rejectCookies() within click handlers for the respective buttons.
The popup container <div class="popUp"> should also be hidden by default: <div class="popUp" style="display: none">.
initCookiesPopup() will show it if necessary.
I've made the users selection accessable as a global variable on window.acceptsCookies which you can use elsewhere in your code.
I am literally just trying to implement into a vuejs component. Can anyone help with on where to put the JavaScript so that it'll work? I'm new to vuejs and I'm still not sure how to set everything up in the script section so that it'll work.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<h2>Accordion with symbols</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Thanks!
Since you're trying to learn Vue I'd suggest you look into how to achieve your desired functionality with Vues own toolset instead of using native JS event handlers, document selects etc.
You can easily add event listeners for most common events with the v-on: directive (or # for short):
<button class="accordion" #click="myClickHandler">Section 1</button>
You can refer to other elements via the ref property which is then available in the Vue component under this.$refs:
<div class="panel" ref="myPanel">...
and in your myClickHandler method:
methods: {
myClickHandler() {
let panel = this.$refs.myPanel
... do stuff ....
}
}
This would be "the Vue way" of tackling your problem - which once you get used to it is really awesome and simple compared to native JS dom selections, eventlisteners etc.
I'd suggest you look more into how to achieve this via Vues tools instead of trying to force native JS and foregoing all of Vues simplicity.
You can put regular javascript in the script tag of your Vue component. It will execute just the same way a regular app.js file would execute.
I have an accordion that works really well, it looks good on the site and works as it should. However, I'm trying to add some more JavaScript functionality to it, to make it more it look more professional.
Currently, the accordion allows you to have multiple panels open at one time i.e. if I open one tab, and then open another tab, both tabs will be open at the same time. And the only way to close these panels, is to re-click on the header.
What I would like is some JavaScript code that prevents multiple tabs from being open at one time, so if I click on a new panel, it should close the existing open panel first. Here is my HTML code for the accordion:
<div class="accordion"><b>Heading 1</b></div>
<div class="panel">
<p class="text-light">Text 1</p>
</div>
<div class="accordion"><b>Heading 2</b></div>
<div class="panel">
<p class="text-light">Text 2</p>
</div>
Here is my JavaScript code in a separate JavaScript file which currently allows multiple tabs to be open at one time
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
Not sure if you need all the CSS, but heres the CSS for showing the panel
div.panel.show {
display: block !important;
}
Hopefully someone can help! Thanks in advance!
To achieve this you need to reset the state of the accordion back to its original state on each click, before you set the required classes on the clicked elements. To do that you can extract functionality to set the class names in to their own function and call it as required. Try this:
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
Working example
Close all opened tabs before opening selected tab. This will prevent multiple tabs from being open at one time.
// Get all Accordion and Panel
let accHeading = document.querySelectorAll(".accordion");
let accPanel = document.querySelectorAll(".accordion-panel");
for (let i = 0; i < accHeading.length; i++) {
// Execute whenever an accordion is clicked
accHeading[i].onclick = function() {
if (this.nextElementSibling.style.maxHeight) {
hidePanels(); // Hide All open Panels
} else {
showPanel(this); // Show the panel
}
};
}
// Function to Show a Panel
function showPanel(elem) {
hidePanels();
elem.classList.add("active");
elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px";
}
// Function to Hide all shown Panels
function hidePanels() {
for (let i = 0; i < accPanel.length; i++) {
accPanel[i].style.maxHeight = null;
accHeading[i].classList.remove("active");
}
}
* {box-sizing: border-box;}
/* Style the Headings that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
margin: 0;
font-weight: 300;
}
/* Change color of the heading and icon (on hover and click) */
.active, .accordion:hover, .accordion:hover::after {
background-color: #007eff;
color: white;
}
/* Add "plus" sign (+) after Accordion */
.accordion::after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
}
/* Add "minus" sign (-) after Accordion (when accordion is active) */
.active::after {
content: "\2212";
color: white;
}
/* Style the accordion panel */
.accordion-panel {
padding: 0 18px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
<div style="border: 1px solid lightgray;">
<h2 class="accordion">Section 1</h2>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="accordion">Section 2</h2>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="accordion">Section 3</h2>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<h2 class="accordion">Section 4</h2>
<div class="accordion-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
When selecting one item, you just need to hide all of them beforehand.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
hideAll();
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
function hideAll() {
for (i = 0; i < acc.length; i++) {
acc[i].classList.toggle("active", false);
acc[i].nextElementSibling.classList.toggle("show", false);
}
}
var acc = document.getElementsByClassName("accordion");
var i;
var last;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
if(last){
last.classList.toggle("active",false);
last.nextElementSibling.classList.toggle("show",false);
}
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
last=this;
}
}
variable last will track the last active accordion, so you don't need to iterate every accordion and panel again.
you have to cover the panel with accordion, so you can easily do that.
refer this
html
<div class="accordion"><b>Heading 1</b>
<div class="panel">
<p class="text-light">Text 1</p>
</div>
</div>
<div class="accordion"><b>Heading 2</b>
<div class="panel">
<p class="text-light">Text 2</p>
</div>
</div>
jquery:
$('.accordion').click(function() {
$(this).find('.panel').show();
$(this).siblings().find('.panel').hide();
});
Working example
I have a bootstrap 3 accordion and I am trying to get it to work with toggle switches.
Currently everything works as it should except that the toggles don't toggle OFF if the panel is collapsed by one of the other accordion panels. Basically I am looking for the toggles to toggle on when a panel is open and toggle off when a panel is collapsed. So that the toggles mimic the accordion. Only the toggle is on if the panel is expanded, and all other toggles and panels would be off / collapsed.
Does anyone know a way to get this to happen?
$("div.panel-heading").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
var checkbox = $(this).find("input[type='checkbox']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
});
/*---- Toggle Switches ------*/
.checkbox-switch {
/* border: 0.1em solid #444; */
border-radius: 20px;
display: inline-block;
font-size: 16px;
width: 2em;
height: 1em;
overflow: hidden;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
top: 3px;
left: 0px;
float: right;
}
.checkbox-switch > input {
display: none;
}
.checkbox-switch > input ~ .checkbox-switch-inner {
margin-left: -2.5em;
-webkit-transition: margin-left 0.2s ease;
-moz-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
}
.checkbox-switch > input:checked ~ .checkbox-switch-inner {
margin-left: -1.5em;
}
.checkbox-switch > .checkbox-switch-inner {
display: block;
width: 8em;
height: 2em;
color: #fff;
overflow: hidden;
}
.checkbox-switch-inner > * {
display: block;
float: left;
height: 2em;
line-height: 2em;
}
.checkbox-switch-inner > .checkbox-switch-on {
/* background: #31A354; */
background: #14aa4b;
width: 3em;
padding-left: 1em;
}
.checkbox-switch-inner > .checkbox-switch-off {
background: #b3b3b3;
width: 3em;
padding-right: 1em;
text-align: right;
}
#ecosystem-collapse .checkbox-switch-inner > .checkbox-switch-on {
background: #23527C;
}
#reference-collapse .checkbox-switch-inner > .checkbox-switch-on {
background: #CE691B;
}
.checkbox-switch-inner > .checkbox-switch-handle {
background: #eee;
width: 1em;
height: 1em;
margin-left: -3.5em;
border: 0.1em solid #999;
border-radius: 20px;
}
#dataBox {
position: absolute;
background-color: white;
max-width: 350px;
margin-left: 10px;
padding: 5px;
z-index: 9999;
}
.panel-header {
cursor: pointer;
}
/*---- END Toggle Switches ------*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
<label for="00" class="tn-headline">TITLE 1</label>
<label class="checkbox-switch" onclick="javascript:showonlyone('nutlayer1');toggleDiv('nutlayer1');"> <!-- The onclick attribute is required by iOS -->
<input type="checkbox" class="radio tn-switch" id="00" checked="checked"/>
<span class="checkbox-switch-inner">
<span class="checkbox-switch-on"></span>
<span class="checkbox-switch-off"></span>
<span class="checkbox-switch-handle"></span>
</span>
</label>
</h4>
</div></a>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
<label for="01" class="tsin-headline">TITLE 2</label>
<label class="checkbox-switch" onclick> <!-- The onclick attribute is required by iOS -->
<input class="radio tsin-switch" type="checkbox" id="01" >
<span class="checkbox-switch-inner">
<span class="checkbox-switch-on"></span>
<span class="checkbox-switch-off"></span>
<span class="checkbox-switch-handle"></span>
</span>
</label>
</h4>
</div></a>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3<label for="01" class="tsin-headline">TITLE 3</label>
<label class="checkbox-switch" onclick> <!-- The onclick attribute is required by iOS -->
<input class="radio tsin-switch" type="checkbox" id="01" >
<span class="checkbox-switch-inner">
<span class="checkbox-switch-on"></span>
<span class="checkbox-switch-off"></span>
<span class="checkbox-switch-handle"></span>
</span>
</label>
</h4>
</div></a>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Example :https://jsfiddle.net/3yjt4Lah/3/
$("div.panel-heading").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
$("#accordion").each(function(){
var checkbox = $(this).find("input[type='checkbox']");
checkbox.prop("checked",false);
})
var checkbox = $(this).find("input[type='checkbox']");
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
});
You need to find that last panel clicked, so when a new panel is clicked the previous checkbox will clear:
var lastPanel = $("div.panel-heading, #collapse1"); //this is the default panel
$("div.panel-heading").on("click",function(event) {
var target = $(event.target);
if (target.is('input:checkbox')) return;
var checkbox = $(this).find("input[type='checkbox']");
if(lastPanel && target !== lastPanel)
lastPanel.find("input[type='checkbox']").prop("checked",false);
if( !checkbox.prop("checked") ){
checkbox.prop("checked",true);
} else {
checkbox.prop("checked",false);
}
lastPanel = target;
});
See FIDDLE