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>

Bootstrap tooltip don't hide on <a> tag click

I'm using the trigger as hover, but when I click on a link with this function the tooltip does not disappear, it will be disturbing on the screen forever
the tooltip is instantiated with this code
$('[data-toggle="tooltip"]').tooltip({
container: 'body',
trigger: 'hover'
});
in tags everything works perfectly, and in some cases works too, I do not know why some happen this, could someone give me a light?
Edit: I've also tried using this code to hide the tooltip with the click event
$(document).ready(function(){
$('[data-toggle="tooltip"]').click(function () {
$('[data-toggle="tooltip"]').tooltip("hide");
});
});
But it doesn't work
Edit*: Picture of how it is (the text is in Portuguese)
Edit**: HTML code
<ul style="clear: both;" class="pager wizard">
<li class="button-previous previous"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>
<li class="voltar"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>
<li class="finalizar"><a>Finalizar<i class="fa fa-check" style="padding-left:5px;"></i></a></li>
<li class="next"><a class="competencia-stripe" data-toggle="tooltip" title="Continuar"><i class="fa fa-arrow-right" ></i></a></li>
</ul>

This Code Use To tag Click to Hide Hover and You Remove Click Event From below code to hover not hide.
Try This Code...! It's Worked.
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
$('.btn-secondary').click(function(){
$('[data-toggle="tooltip"]').tooltip('hide');
});
.tooltiphide {
margin-top: 50px;
margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Tooltip</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="tooltiphide">
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</a>
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</a>
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</a>
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</a>
</div>
</body>
</html>

This is because trigger is not set. The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.
So all you have to do is to define trigger as 'hover' only. Below the same example you have linked to without persisting tooltips after a button is clicked :
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
the doc example in a fiddle -> http://jsfiddle.net/vdzvvg6o/

I tried to hide all tooltips as soon as the page loads and it worked
$([data-toggle="tooltip"]).on('load', function(){
$('[data-toggle="tooltip"]').tooltip("hide");
});
but I believe it is not the best solution and I seek a better, another solution that came to me was this
window.addEventListener("click", function (event) {
$('.tooltip.fade.top.in').tooltip("hide");
}

The <a> tag defines a hyperlink, which is used to link from one page to another.
so it is not appropriate for one-page actions like this. but you can fix this issue by loses focus on the element by .focusout()
$(document).ready(function(){
$('[data-toggle="tooltip"]').click(function(){
$(this).focusout();
});
});

How to open a popup textarea box asking user to submit comments?

I have the following dropdown list as a part of my project:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="rem">CS 520</li>
<li class="rem">CS 530</li>
<li class="rem">CS 571</li>
<li class="rem">CS 575</li>
</ul>
</div>
When i click on any of the li, i want to popup (not alert) a box containing textarea (to submit comments) and SUBMIT, CANCEL and RESET buttons.
I am unable to figure this out using JavaScript (or jQuery). Is there any way this can be achieved? I can find people giving examples where they do the similar problem with an alert, but I need to do it with a simple popup box.
There is somewhat similar problem's solution on this link ; But the JS code is too complex I guess. Thanks

https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Check this and modify the code for list

Check this code and correct accordingly, If will click on any li popup dialog will open.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h3>Header</h3>
</div>
<div data-role="content">
<!-- content -->
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
</div>
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li><a id="details" href="#">View details</a></li>
<li><a id="share" href="#">Share</a></li>
</ul>
</div><!-- /popup-menu -->
</div>
<script>
var currentId = 0;
var baseURL = "person.php?id=";
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
</script>
</body>
</html>
For more support and help , go through by giving this link in jsFidle Click Here 1 or check here Link 2
Check these links to open your popup and how it workd

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.

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