Develop Reference

HTML/JQuery: Disable span / button click (greying it out and disable click)

I have two spans that display certain information upon click, and I was unsure how I can grey out the spans to look like a disabled button when the other one is clicked. My code is below. I thought I could do something like $("#toggle-odd").attr("disabled", true") or $("toggle-odd").unbind("click") but neither seemed to give me the desired result.
$("document").ready(function(){
$("#odd").hide();
$("#even").hide();
});
$("#toggle-odd").click(function(){
$("#even").hide();
$("#odd").toggle();
});
$("#toggle-even").click(function(){
$("#odd").hide();
$("#even").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<span class="btn btn-contrast" style="background-color: green" href="#" id="toggle-odd"> Show Odd Objects </span>
<span class="btn btn-contrast" style="background-color: red" href="#" id="toggle-even"> Show Even Objects </span>
<p id="odd">
Odd
</p>
<p id="even">
Even
</p>

The span tag is made to display text. Here you should use buttons. If you want to disable the other button "graphically", just add a class ( I named it disabled). If you want to really disable it, add $("#your-button").attr("disabled","disabled");
In the following example I made sure that we can reactivate a button but if you want to keep it deactivated, you just have to extract the code of the first condition.
$("document").ready(function(){
$("#odd").hide();
$("#even").hide();
});
$("#toggle-odd").click(function(){
if($("#odd").css("display") == "none"){
$("#toggle-even").attr("disabled","disabled");
$("#toggle-even").addClass("disabled");
}else{
$("#toggle-even").removeAttr("disabled");
$("#toggle-even").removeClass("disabled");
}
$("#even").hide();
$("#odd").toggle();
});
$("#toggle-even").click(function(){
if($("#even").css("display") == "none"){
$("#toggle-odd").attr("disabled","disabled");
$("#toggle-odd").addClass("disabled");
}else{
$("#toggle-odd").removeAttr("disabled");
$("#toggle-odd").removeClass("disabled");
}
$("#odd").hide();
$("#even").toggle();
});
.disabled{
background-color: grey;
}
#toggle-odd{
background-color: green
}
#toggle-even{
background-color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<button class="btn btn-contrast" id="toggle-odd"> Show Odd Objects </button>
<button class="btn btn-contrast" id="toggle-even"> Show Even Objects </button>
<p id="odd">
Odd
</p>
<p id="even">
Even
</p>

Why collapse/expend dont work after adding new block?

Why my js code dont work? It worked before but when I added next block it dont work:
<div class="collapse" id="collapse-block">
I have collapse block (id='collapse-block') which has 3 other collapse blocks inside. This js code works for button (id='expand-collapse') which will expand/collapse blocks inside div (id='blocks')
$(function() {
$('#expand-collapse').on('click', function() {
var allCollapsed = true;
$('#blocks .collapse').each(function(i, block) {
if ($(block).hasClass('show')) {
allCollapsed = false;
}
});
$('#blocks .collapse').each(function(i, block) {
if (allCollapsed) {
$(block).collapse('show');
} else {
$(block).collapse('hide');
}
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="card">
<div class="card-header">
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapse-block" aria-expanded="false" aria-controls="collapse-block">OPEN/CLOSE</button>
<button id='expand-collapse' type="button">OPEN/CLOSE BLOCKS</button>
</div>
<div class="card-block">
<div class="collapse" id="collapse-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1">FIRST BLOCK</a>
<div class="collapse block" id="block-1">
FIRST BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">SECOND BLOCK</a>
<div class="collapse block" id="block-2">
SECOND BLOCK
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">THIRD BLOCK</a>
<div class="collapse block" id="block-3">
THIRD BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

As per javascript standard, whenever you modify DOM, add or remove children, the event gets removed, you will have to add event again. that's issue here. I guess.
Edit
Modifying innerHTML causes the content to be re-parsed and DOM nodes to be recreated, losing the handlers you have attached. Appending elements as in the first example doesn't cause that behavior, so no re-parsing has to occur, since you are modify the DOM tree explicitly.
Another good way to handle this is to use insertAdjacentHTML(). For example:
document.body.insertAdjacentHTML('beforeend', '<br>')

You need to include a reference to the Bootstrap script or Collapse.js
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bootstrap Scripts
Collapse.js

You are not added bootstrap css in your code, I think that's the problem
refer it like
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
Working fiddle https://jsfiddle.net/qcdk68et/

SORRY! It was my fault! I just forget to add js code file inside html. Question is closed.

Check the state of buttons-checkbox

I want to make a checkbox that looks like a button: when it is checked, the button looks pressed; when it is unchecked, the button looks unpressed.
As I use bootstrap, naturally I think of using data-toggle="buttons-checkbox". But It does not seem very practical to verify the state of the checkbox. For example, .prop('checked') does not seem to work in the following code.
$('#input-checkbox').click(function () {
if ($("#input-checkbox").prop('checked')) {
alert("yes");
} else {
alert("no");
}
});
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-default active" id="input-checkbox">INPUT</button>
</div>
</body>
Does anyone know what's wrong there?

Add value attribute to your button. I changed btn-default to btn-primary and added a normal button on the side to state the difference.
$('#input-checkbox').click(function () {
if ($("#input-checkbox").attr('value')=="checked"){
$("#input-checkbox").attr('value','notchecked');
$("#input-checkbox").removeClass('active');
}
else {
$("#input-checkbox").attr('value','checked');
$("#input-checkbox").addClass('active');
}
});
.btn:focus,.btn:active {
outline: none !important;
}
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary active" value="checked" id="input-checkbox">INPUT</button>
<button type="button" class="btn btn-primary"> NPUT</button>
</div>
</body>

(Bootstrap) - Changing dropdown button text to reflect item clicked removes caret

I am using the dropdown from bootstrap and i would like the button to have its text change depending on which of it's two dropdown items i click. The text changes according to the item clicked but the caret is gone after the first change and so forth. I want to keep the caret in the button!
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span></button>
<ul class="dropdown-menu" value="Fast">
<li onclick="dropdown(this.innerHTML);">Fast</li>
<li onclick="dropdown(this.innerHTML);">Accurate</li>
</ul>
</div>
<script>
function dropdown(val){
var y = document.getElementsByClassName('btn btn-default dropdown-toggle');
var aNode = y[0].innerHTML=val;
}
</script>

With your current code, appending the caret icon code will help you retain it after changing the drop down value.
function dropdown(val) {
var y = document.getElementsByClassName('btn btn-default dropdown-toggle');
var aNode = y[0].innerHTML = val + ' <span class="caret"></span>'; // Append
}
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span>
</button>
<ul class="dropdown-menu" value="Fast">
<li onclick="dropdown(this.innerHTML);">Fast</li>
<li onclick="dropdown(this.innerHTML);">Accurate</li>
</ul>

.innerHTML will get you the entire content, including the inner span that you are using for the caret.
What you need is the textContent of the firstchild of your dropdown, which is actually a textNode.
Example Snippet:
var dropdown = document.getElementsByClassName('dropdown-toggle')[0],
options = document.getElementsByClassName('dropdown-menu')[0]
;
options.addEventListener("click", function(e) {
if (e.target.tagName === 'A') {
dropdown.firstChild.textContent = e.target.textContent + ' ';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="dropdown">
<button id="dropdownBtn" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Fast <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Fast</li>
<li>Accurate</li>
</ul>
</div>

This is happening because you're replacing the html with the value - the caret span is inside the button (so part of the html of the button), so also getting replaced.
As you're using bootstrap, which uses jquery, use jquery to make this easy:
function dropdown(val) {
$(".btn.dropdown-toggle").text(val)
}

You can save the caret inside a variable and add it back when you change the value.
As you are using bootstrap, you already have jQuery loaded in the page so let's do it this way:
Fiddle
$myDropdown = $('#MyDropdown');
$myDropdown.find("li").click(function(){
$caret = ' <span class="caret"></span>';
$val = $(this).html();
$(".btn.dropdown-toggle").html($val+$caret)
});
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span></button>
<ul id="MyDropdown" class="dropdown-menu" value="Fast">
<li>Fast</li>
<li>Accurate</li>
</ul>
</div>

Use innerText in the dropdown function instead of innerHTML
<li onclick="dropdown(this.innerText);">Fast</li>
Change the content of the function to replace the textContent of the firstChild which holds the value of the button.
var aNode = y[0].firstChild.textContent = val;
function dropdown(val) {
var y = document.getElementsByClassName('btn btn-default dropdown-toggle');
var aNode = y[0].firstChild.textContent = val;
}
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span>
</button>
<ul class="dropdown-menu" value="Fast">
<li onclick="dropdown(this.innerText);">Fast</li>
<li onclick="dropdown(this.innerText);">Accurate</li>
</ul>

This is the one and only permanent solution for bootstrap 3.This will work for all dropdown.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Fast</li>
<li>Accurate</li>
</ul>
</div>
<script>
$(document).on('click','.dropdown-menu li',function(){
$(this).parent().parent().find('.dropdown-toggle').html($(this).html() + ' <span class="fa fa-caret-down"></span>');
});
</script>

You can try:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

Uncaught TypeError implementing Fuelux wizard

I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>

So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079