We Keep Coding

Showing and hiding divs with class

I have written the below script that shows and hides divs when a checkbox is clicked. It gets the checkbox value and then hides the div with that class. My problem is a div may be tagged with two checkbox values. If one of them is still ticked I'd still like the div to be shown rather than hidden as my script currently does. What is the way around that?
HTML
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>
Script:
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
checkboxval = $(this).val();
$(".simple-filter-items").find("." + checkboxval).toggle();
});
});
Fiddle is here https://jsfiddle.net/h5as3cwb/

You can use each loop to iterate through checked checkboxes and show divs where checkbox is checked
Demo Code :
jQuery(document).ready(function($) {
$(".filter-click").change(function() {
//hide all div
$(".simple-filter-items div").hide()
//loop throgh checked checkboxes
$(".simple-filter input[type=checkbox]:checked").each(function() {
//show them
$(".simple-filter-items").find("." + $(this).val()).show();
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

This solution is very similar to #Swati's but uses the .filter() and .map() methods:
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

How to make both event listeners work

What I am trying to be is make the first event listener use it on change when you change the option and then once you fill out the form make it pop out at the bottom of the page. I can only use Vanilla Javascript. Also if you select anything other then the 5th option it will turn gray and not be able to select any of the radio buttons. Then you fillout the form and I can't have the form submit I have to have it just drop down with innerHTML.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" disabled>
<label class="form-check-label" for="exampleRadios1">
Red Fleet
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="white" disabled>
<label class="form-check-label" for="exampleRadios2">
White Fleet
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" disabled>
<label class="form-check-label" for="exampleRadios3">
Blue Fleet
</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-
describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="exampleInputPassword1">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btn">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", init, false);
function init(e) {
e.preventDefault;
document.getElementById("select").addEventListener("change", start);
}//end init function
//main algorithm
function start(e) {
e.preventDefault;
short();
//child one
function short(e) {
e.preventDefault;
var blue;
var white;
var red;
var select;
select = document.getElementById("select").value;
if (select == 1) {
document.getElementById("red").disabled = false;
document.getElementById("white").disabled = false;
document.getElementById("blue").disabled = false;
document.getElementById("btn").addEventListener("click", uhjeff);
}
else {
document.getElementById("red").disabled = true;
document.getElementById("white").disabled = true;
document.getElementById("blue").disabled = true;
document.getElementById("btn").addEventListener("click", uhjeff);
}
}
}
function uhjeff(e) {
var date;
var location;
var textbox;
e.preventDefault;
document.getElementById("dateout").innerHTML = document.getElementById("date").value;
document.getElementById("locationout").innerHTML = document.getElementById("location").value;
document.getElementById("textboxout").innerHTML = document.getElementById("textbox").value;
}
</script>
</body>
</html>

You had several errors. Please read the HTML and JavaScript comments inline below for corrections.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<meta charset="utf-8">
<title>Create</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form>
<!--selections inputs-->
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="select">
<option value="4">1</option>
<option value="51">2</option>
<option value="765">3</option>
<option value="74747">4</option>
<option value="1">5</option>
</select>
</div>
<!--radio inputs-->
<!-- The "for" attribute of a <label> must match the "id" attribute of the
element that it is a label for. -->
<div class="form-check">
<input class="form-check-input" type="radio" name="color" id="red" value="red" disabled>
<label class="form-check-label" for="red">Red Fleet</label>
</div>
<div class="form-check">
<!-- radio buttons need to have a value for them to have meaning -->
<input class="form-check-input" type="radio" name="color" id="white" value="white" disabled>
<label class="form-check-label" for="white">White Fleet</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="color" id="blue" value="blue" disabled>
<label class="form-check-label" for="blue">Blue Fleet</label>
</div>
<div class="form-group">
<label for="exampleInputEmail1">change this</label>
<input type="text" class="form-control" id="date" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="location">change this</label>
<input type="text" class="form-control" id="location">
</div>
<div class="form-group">
<label for="textbox">change this</label>
<input type="text" class="form-control" id="textbox">
</div>
<button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
<div class="col-lg-6"></div>
<p id="dateout"></p>
<p id="locationout"></p>
<p id="textboxout"></p>
</div>
</div>
<script>
// If you script is located after all the HTML, then it is unecessary to set up a
// DOMContentLoaded event listener because, at this point, the DOM is loaded.
document.getElementById("select").addEventListener("change", start);
// Get the references to the DOM elements you'll be using just once:
var blue = document.getElementById("blue");
var white = document.getElementById("white");
var red = document.getElementById("red");
// You need a reference to the form, not the submit button, because it's the
// submit event of the form that you'll need to cancel later.
var form = document.querySelector("form");
var dateout = document.getElementById("dateout");
var date = document.getElementById("date");
var locationout = document.getElementById("locationout");
// location is a Global property of window, don't use it as a variable name
var loc = document.getElementById("location");
var textboxout = document.getElementById("textboxout");
var textbox = document.getElementById("textbox");
// You were setting the button's event handler in all cases, so it doesn't
// belong in an "if". Also, the button is a submit button, so handle the submit event
// of the form, not the click event of the button
form.addEventListener("submit", uhjeff);
//main algorithm
function start(e) {
// There is no reason to cancel the "change" event of the select.
// Also, since all this function does is call short(), just make this
// function have the contents of short()
// Since this is the change event handler for your select, you can access
// the select with the keyword "this"
if (this.value == 1) {
// You initially set the elements to be disabled with the disabled HTML attribute.
// To avoid confusion, modify the attribute, not the JavaScript property.
red.removeAttribute("disabled");
white.removeAttribute("disabled");
blue.removeAttribute("disabled");
} else {
red.setAttribute("disabled", "disabled");
white.setAttribute("disabled", "disabled");
blue.setAttribute("disabled", "disabled");
}
}
function uhjeff(e) {
e.preventDefault(); // .preventDefault() is a method, you need to add () after it.
// .innerHTML is for setting/getting strings that contain HTML
// Use .textContent when working with strings that don't have HTML
dateout.textContent = date.value;
locationout.textContent = loc.value;
textboxout.textContent = textbox.value;
}
</script>
</body>
</html>

Remove appended data on second click

I have few checkboxes. When I click on any of them I pass the value to span. Everything seems to work fine but there's something that I can't resolve. When I click first time value is passed to my span (checkbox is checked) but when I unclick this checkbox, value is passing to span again instead of delete it from my span. Next thing, when I want to write my own text I have other checkbox for that. When I click on it I see input. I cant write text and it will be appended to my span. I want to remove this value too when I unclick this checkbox. Last thing, I want to add red border to empty elements. Anyone could help me?
$('.checkbox').on('click', function(){
var dataAttr = $(this).attr('name');
var dataAttrVal = $(this).val();
$('[name="' + dataAttr + '-value"]').append(dataAttrVal + ", ");
$('#summary_' + dataAttr).append(dataAttrVal + ", ");
});
$('.component-other-value').on('change touchstart tap', function(){
var dataName = $(this).attr('data-product');
var value = $(this).val();
$('#summary_other_' + dataName).text(value);
$('[name="' + dataName + '-value"]').append(value + ", ");
});
$('.component-other').on('click', function(){
$(this).closest('.container')
.find('.component-other-value')
.prop("disabled", !this.checked);
});
input:disabled {
opacity: 0;
}
input:enabled {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
<label for="fruit-pineapple"><img src="img/ananas.png"></label>
<p class="description">Ananas</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
<label for="fruit-apple"><img src="img/jablko.png"></label>
<p class="description">Jabłko</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
<label for="fruits-oth"><img src="img/owoce-wlasne.png"></label>
<p class="description">Własna propozycja</p>
</div>
</div>
<input type="text" name="fruits-other" id="fruits-other" class="component-other-value" data-product="fruits" placeholder="Wpisz owoce" disabled>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
<label for="fruit-nofruit"><img src="img/owoce-brak.png"></label>
<p class="description">Bez owoców</p>
</div>
</div>
</div>
<p>
Owoce: <br>
<span id="summary_fruits" class="summary"></span>
<span id="summary_other_fruits" class="summary" style="border-bottom: 1px solid red;"></span>
</p>
</div>

check whether the event is fired when the checkbox is checked or not checked.
$('.checkbox').on('click', function(){
if($(this).is(':checked')){
//do you logic when the checkbox is checked.
}else{
//do your logic when the checkbox is not checked.
}
});

You need to loop over all checkboxes when each checkbox is clicked
Note I wrapped the whole thing in the label.
$('.component-other-value, .fruits').on('change', function() {
var fruits = [], other = [];
$('.component-other-value, .fruits').each(function() {
if (this.checked) {
var dataName = $(this).attr('data-product');
var value = $(this).val();
if (dataName) other.push(value)
else fruits.push(value)
}
});
$('#summary_fruits').text(fruits.join(","));
$('#summary_other_fruits').text(other.join(","));
});
$('.component-other').on('click', function() {
$(this).closest('.container')
.find('.component-other-value')
.prop("disabled", !this.checked);
});
input:disabled {
opacity: 0;
}
input:enabled {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
<img src="img/ananas.png">
<p class="description">Ananas</p>
</label>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
<img src="img/jablko.png">
<p class="description">Jabłko</p>
</label>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
<img src="img/owoce-wlasne.png">
<p class="description">Własna propozycja</p>
</label>
</div>
</div>
<input type="text" name="fruits-other" id="fruits-other" class="component-other-value" data-product="fruits" placeholder="Wpisz owoce" disabled>
<div class="col-sm-3">
<div class="input-item">
<label>
<input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
<img src="img/owoce-brak.png">
<p class="description">Bez owoców</p>
</label>
</div>
</div>
</div>
<p>
Owoce: <br>
<span id="summary_fruits" class="summary"></span>
<span id="summary_other_fruits" class="summary" style="border-bottom: 1px solid red;"></span>
</p>
</div>

$('.checkbox').on('click', function(){
var check = $(this);//PROPERTIES OF CLICKED CHECKBOX
var dataAttr = $(this).attr('name');
var dataAttrVal = $(this).val();
if (check.prop('checked')==true){ // check weather checkbox is checked.
$('[name="' + dataAttr + '-value"]').append(dataAttrVal + ", ");
$('#summary_' + dataAttr).append(dataAttrVal + ", ");
}
else { //if not remove the occurence of value that you unchecked
str = $('#summary_' + dataAttr).html();
$('#summary_' + dataAttr).html(str.replace(dataAttrVal+", ",""));
}
});
$('.component-other-value').on('change touchstart tap', function(){
var dataName = $(this).attr('data-product');
var value = $(this).val();
$('#summary_other_' + dataName).text(value);
$('[name="' + dataName + '-value"]').append(value + ", ");
});
$('.component-other').on('click', function(){
$(this).closest('.container')
.find('.component-other-value')
.prop("disabled", !this.checked);
});
input:disabled {
opacity: 0;
}
input:enabled {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
<label for="fruit-pineapple"><img src="img/ananas.png"></label>
<p class="description">Ananas</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
<label for="fruit-apple"><img src="img/jablko.png"></label>
<p class="description">Jabłko</p>
</div>
</div>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
<label for="fruits-oth"><img src="img/owoce-wlasne.png"></label>
<p class="description">Własna propozycja</p>
</div>
</div>
<input type="text" name="fruits-other" id="fruits-other" class="component-other-value" data-product="fruits" placeholder="Wpisz owoce" disabled>
<div class="col-sm-3">
<div class="input-item">
<input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
<label for="fruit-nofruit"><img src="img/owoce-brak.png"></label>
<p class="description">Bez owoców</p>
</div>
</div>
</div>
<p>
Owoce: <br>
<span id="summary_fruits" class="summary"></span>
<span id="summary_other_fruits" class="summary" style="border-bottom: 1px solid red;"></span>
</p>
</div>

can't get jquery parentsUntil to work

I've been trying to use the jquery parentsUntil method to hide a button until a radio box is selected, but I can't seem to get it to work. It's probably something obvious, but it's been bugging me for a couple of days now. Can anyone see what I'm doing wrong.
(function($) {
$(function(){
$('.last-item').change(function() {
if( $(this).val() != '' ) {
$(this).parentsUntil('.step').find('.button-next').removeClass('hide');
$(this).parentsUntil('.step').find('.button-next').addClass('show');
console.log("changing the last item");
}
});
});
})(jQuery);
.hide {
display: none;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup></label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
JS Fiddle

.parentsUntil() gets "the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector,".
Try .closest() instead

This is likely what you meant?
No need to hide if value is empty since you cannot deselect a radio.
If you want to hide when some value is empty, use .toggle($(this).val()!="")
(function($) {
$(function() {
$('.last-item').on("click",function() { // click assumes radio as last item
$(this).closest("div.step").find('.button-next').show();
});
});
})(jQuery);
.button-next { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup>
</label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>

Try this snippet. I hope it will work
Note:remove hide class from -> class="button-next hide"
$(function(){
$('.button-next').hide();
$('input[type="radio"]').click(function() {
if($(this).prop('checked') == true) {
$('.button-next').show();
}
else {
$('.button-next').hide();
}
});
});

All good sensible answers, guys, but none of them worked for me. In the end I had to use
$(this).closest('.step-3').find('.button-next').css('display','block');

how to dynamically change theme of JQM collapsible

I have this collapsible:
<div id ="optionsDiv" data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Options</h3>
<div data-role="fieldcontain" id="checkboxesDiv">
<label>
<input type="checkbox" name="clearafter" id="cbClearAfter" />Clear After Solving</label>
<label>
<input type="checkbox" name="alwayssimplify" id="alwaysSimplify" />Always Simplify Roots (may be wrong)</label>
<small id="whatsthatinfobox">What's This?</small>
<hr>
<fieldset data-role="controlgroup" data-type="horizontal" id="themeChanger">
<legend>Theme:</legend>
<input type="radio" name="radio-choice" id="radio-choice-day" value="day" checked="checked" />
<label for="radio-choice-day">Day</label>
<input type="radio" name="radio-choice" id="radio-choice-night" value="night" />
<label for="radio-choice-night">Night</label>
</fieldset>
</div>
</div>
This detects changes between the horizontal radio buttons:
$("#themeChanger").change(function(){
if ($("#radio-choice-day").is(":checked"))
{
theme = "day";
}
else
{
theme = "night";
}
changeTheme(theme);
});
What would you put here:
function changeTheme(theme)
{
if (theme=="day")
{
//change to day theme
}
else
{
//change to night theme
}
}
In order to change the data-theme and the data-content-theme attributes of the collapsible?
I have tried using attr("data-theme","a"); but it does not work.
Thank you.

You just need to call the Collapsible Widget with other options.
$("#optionsDiv").collapsible({theme: "a", contentTheme: "a"});
$("#optionsDiv").collapsible({theme: "b", contentTheme: "b"});
$("#themeChanger").change(function() {
if ($("#radio-choice-day").is(":checked")) {
theme = "day";
} else {
theme = "night";
}
changeTheme(theme);
});
function changeTheme(theme) {
if (theme == "day") {
$("#optionsDiv").collapsible({
theme: "a",
contentTheme: "a"
});
} else {
$("#optionsDiv").collapsible({
theme: "b",
contentTheme: "b"
});
}
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div id="optionsDiv" data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="gear" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Options</h3>
<div data-role="fieldcontain" id="checkboxesDiv">
<label>
<input type="checkbox" name="clearafter" id="cbClearAfter" />Clear After Solving</label>
<label>
<input type="checkbox" name="alwayssimplify" id="alwaysSimplify" />Always Simplify Roots (may be wrong)</label>
<small id="whatsthatinfobox">What's This?</small>
<hr>
<fieldset data-role="controlgroup" data-type="horizontal" id="themeChanger">
<legend>Theme:</legend>
<input type="radio" name="radio-choice" id="radio-choice-day" value="day" checked="checked" />
<label for="radio-choice-day">Day</label>
<input type="radio" name="radio-choice" id="radio-choice-night" value="night" />
<label for="radio-choice-night">Night</label>
</fieldset>
</div>
</div>