We Keep Coding

JavaScript Button not work at one section

On the site I use a pop-up modal window. In all sections on the site it is used and works fine, but in one of the sections it does not work, why is that? Global section:
<!-- Sidebar -->
<nav id="sidebar">
<div id="dismiss">
</div>
<div class="sidebar-header">
<h3>Menu</h3>
</div>
this is menu
</ul>
</nav>
My button:
<button type="button" id="sidebarCollapse" class="btn-yellow" data-ng-if="user.accessToken">Open sidebar</button>
And in JS file at first line:
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
Why does it work in all sections, but does not work in one? What could be the problem?

bootstrap modal opening when its not supposed to

I have a button on my page. Currently it is opening up a bootstrap modal, and i do not want to do that yet.
My html includes :
<div class='bookmarkButtonDiv'>
<button type='button' class="btn btn-primary" data-toggle='modal' data-target='#newModal' id="IBtn">Bookmark</button>
</div>
My Modal Code includes
<div class="modal fade" id="newModal" role="dialog">
<!-- some code to populate the modal -->
In my Javascript i have
jQuery.noConflict();
(function($) {
$(function () {
$('#IBtn').click(function (e) {
console.log('button clicked'
});
});
})(jQuery);
For some reason this is opening up the bootstrap modal, and writing to the console. All i want to do is have it write to the console. Eventually the button will be linked to open the modal, but right now i just want to test things in the console.
I am using bootstrap 4.3

Remove data-toggle='modal' data-target='#newModal'. Bootstrap automatically attaches event handlers to open the modal when you click an element with those attributes.
jQuery.noConflict();
(function($) {
$(function () {
$('#IBtn').click(function (e) {
console.log('button clicked');
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='bookmarkButtonDiv'>
<button type='button' class="btn btn-primary" id="IBtn">Bookmark</button>
</div>
<div class="modal fade" id="newModal" role="dialog">
<h1>Modal contents</h1>
</div>

There are two ways to achieve what you want
First
Remove data-toggle='modal' data-target='#newModal'
Second
$('#IBtn').click(function (e) {
e.stopPropagation();
console.log('button clicked');
});

I want to change html class on hover

Need to change class on hover
to fa-angle-down
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fas fa-angle-down');
}, function () {
$(this).removeClass('fas fa-angle-up');
});
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Services <i id="angle" class="fas fa-angle-up"></i>
script

When the mouse goes over, you are adding fa-angle-down and when it goes out, you are removing fa-angle-up.
If you want to swap them, you need to add one and remove class each time.
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fa-angle-down').removeClass('fa-angle-up');
}, function () {
$(this).addClass('fa-angle-up').removeClass('fa-angle-down');
});
});

With pure JavaScript, you can just use the Element.classList property to toggle the classes like this:
var x = document.getElementById("home");
x.addEventListener("mouseover", function(){
this.children[0].classList.add("fa-angle-down");
this.children[0].classList.remove("fa-angle-up");
})
x.addEventListener("mouseout", function(){
this.children[0].classList.add("fa-angle-up");
this.children[0].classList.remove("fa-angle-down");
})
.fa-angle-up:after{content:"up!";}.fa-angle-down:after{content:"down!";}
Services <i id="angle" class="fas fa-angle-up"></i>
N.B. The up and down text is just for demonstrating how the JavaScript works.

Bootstrap tooltips changes

is it possible to change tooltip on some element when button is clicked?
DIV with some tooltip DIV
BUTTON
after user click on button:
DIV with other tooltip DIV
BUTTON

I wrote this one, but its not with bootstrap tooltip
$(".switch").click(function() {
$(".tooltip").toggle();
if ($("#tp1").text() == "Active") {
$("#tp1").text("Stop");
}
else {
$("#tp1").text("Active");
}
});
<div class="switch">
<input type="checkbox">
<label><i class="glyphicon glyphicon-off"></i></label>
</div> <div class="tooltip fade bottom in" style="display: block;top: 52px;width: 115px;left: 16.5px;"><div class="tooltip-arrow"></div><div id="tp1" class="tooltip-inner">Active</div></div>

I had a best working code for you! Try this below code.
$(function() {
var $toolTip = $('#tooltip-example');
var originalTitle = $toolTip.attr('title');
$toolTip.tooltip({placement: "bottom"});
$toolTip.click(function() {
$toolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show');
});
$(document).on("mouseout","#tooltip-example",function()
{
$toolTip.attr('title',originalTitle).tooltip('fixTitle').tooltip('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button>

How to determine if a bootstrap collapse is opening or closing?

If I have a bootstrap collapse how can I determine from a click event wether the collapse is opening or closing?
Here is my click event or maybe there is a better way then to use a click event?
$(document).on("click", "a.register-student-link", function() {
// do some stuff to check if opening or closing
}
<div>
<a id=#space.EventId class="register-student-link" data-toggle="collapse" href=#spaceIdWith aria-expanded="false" aria-controls="collapseExample">
Register Student
</a>
</div>

Bootstrap uses the aria-expanded attribute to show true or false if the region is collapsed or not.
var isExpanded = $(collapsableRegion).attr("aria-expanded");

Try:
$('#collapseDiv').on('shown.bs.collapse', function () {
console.log("Opened")
});
$('#collapseDiv').on('hidden.bs.collapse', function () {
console.log("Closed")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<a id=#space.EventId class="register-student-link" data-toggle="collapse" href="#collapseDiv" aria-expanded="false" aria-controls="collapseExample">Register Student</a>
</div>
<div class="collapse" id="collapseDiv">This is the collapsible content!</div>
(based on https://stackoverflow.com/a/18147817/2033574 (Kevin mentioned) and http://www.bootply.com/73101)

I needed a way to determine if the element was collapsed BEFORE actually collapsing. Whereas the event listeners only trigger afterwards.
//Will return true if uncollapsed
$('#collapseDiv').hasClass('in');
//Will return true if in the process of collapsing
$('#collapseDiv').hasClass('collapsing');
//Will return true if collapsed
$('#collapseDiv').hasClass('collapse');

You can watch the event hidden.bs.collapse
see fiddle: http://jsfiddle.net/kyeuvx1d/

if(!$("#id").hasClass('show')){
alert("Uncollapsed");
}
else {
alert("Collapsed");
}
for Bootstrap 4