Develop Reference

Hide side navbar's <hr> element on adding active class to <a>

i have a side navbar in which each anchor tag has a separate <hr>. I am adding a active class when user clicks on a link, which I have done successfully. But I want to hide the <hr> of the anchor tag that has the active class. The problem is once I hide the hr on active class I can't show it back when another <a> is active.
Menu
<i class="fas fa-home"></i>&nbsp&nbsp <strong>Home</strong><hr>
<i class="fas fa-chart-bar"></i>&nbsp&nbsp <strong>Report</strong><hr>
<i class="fas fa-money-bill-alt"></i>&nbsp <strong>Transaction</strong><hr>
<i class="fas fa-address-book"></i>&nbsp&nbsp <strong>Account Master</strong><hr>
<i class="fas fa-key"></i></i>&nbsp&nbsp <strong>Change Password</strong><hr>
<i class="fas fa-cogs"></i></i>&nbsp&nbsp <strong>Financial Year</strong><hr>
<i class="fas fa-sign-out-alt"></i></i>&nbsp&nbsp <strong>Logout</strong><hr>
jquery is:
$(this).addClass("menuActive").siblings().removeClass("menuActive");
$(this).find("hr").hide().siblings().find("hr").show();
As I have shown in the image when I click other <a> the <hr> of Report remains hidden.

This would be easier with a CSS rule:
a.menuActive hr {display:none}
Now all you need to manipulate in javascript is the menuActive class; the hr will appear and disappear on its own.
$(this).addClass("menuActive").siblings().removeClass("menuActive");

Try display:none and display:block instead of show and hide like this:
$("#id").css("display", "none");
$("#id").css("display", "block");

On click for child element

I want to trigger an on click event for my <i> tag. I added an ID to it but if i try use:
$("#delete-playlist-song").on("click", function() {
console.log("in"); //doesnt trigger
});
It won't trigger so I want to try a different approach? Something like:
$("master-playlist-entries").find("i.pl-action").on("click", function() {
console.log("in"); //Won't work
});
My HTML code:
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span></li>
</ul>
What I did try was an onclick event to call a function which worked but you see, I want to grab the data-path information and pass it to that function so I can use: $(this).attr("data-path") which will return a different link each time for different li.
Any help will be appreciated!

Your original code works in a one item snippet, https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/ so I have to guess as your example is incomplete:
It is not shown, but I would guess you have multiple <i> elements with the same id (e.g. id="delete-playlist-song). If that is the case it simply will not find any except the first one as browsers use a fast-lookup cache which can only have one element stored against each ID value. IDs must be unique on a HTML page to work property.
Switch to using classes instead and use a delegated event handler.
https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/
e.g.
$(document).on('click', '.delete-playlist-song', function() {
$(this).closest('li').slideUp();
});
Notes:
You should connect delegated event handlers to a non-changing ancestor element, but document is the best default if nothing else is close. Do not use body as it has a bug to do with styling that can cause mouse events to not fire. Use document as your friendly backup as it also exists before DOM ready.

I guess your html is added dynamically - so register the click listener dynamically using this:
$("body").on("click", "#delete-playlist-song", function() {
And for getting the attribute data-path you can use $(this).closest('li').attr("data-path") inside the listener.
See a demo below:
$("body").on("click", "#delete-playlist-song", function() {
console.log($(this).closest('li').attr("data-path"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span>
</li>
</ul>

Jquery, change caret class on click

I have this html code below with the caret class fa fa-caret-down. Now I want that if the user clicks on the caret, the caret-down class shall gets removed and get replaced with the fa fa-caret-up class. And the same again, if he klicks on the caret-up class, it shall get back to the caret-down class.
( any other way is also okay ). I've tried this:
$(document).ready(function() {
$('.fa-caret-down').on('click', function () {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
});
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
});
[ This toogle also runs very bad with this code ]
But this only works for the first part. If I'm trying to get back to the caret-down, nothing happens.
Thats my HTML:
<div id="acc-construct" class="hidden">
<div class="acc-group">
<div class="acc-head">
<a class="acc-toggle collapsed acc-default" data-toggle="collapse"
data-parent="#acc" href="#collapse-divsInContainer">
<i data-arrow="" class="pull-right fa fa-caret-down"></i>
</a>
</div>
<div id="collapse-divInContainer" class="acc-body collapse">
<div class="acc-inner">
<dl class="dl-horizontal"></dl>
<div class="separator"></div>
</div>
</div>
</div>
</div>
I'm still new in jquery/Js and sorry for my bad english.
Thanks for any help !

Set another class (caret-icon) on the caret element and attach click event to that class:
<i class="caret-icon fa fa-caret-down"></i>
And use toggleClass() method:
$(document).on('click', '.caret-icon', function() {
$(this).toggleClass('fa-caret-up fa-caret-down');
})

Use 'if - else' condition with 'hasClass' method.
Here is the Jquery
$(document).ready(function () {
$('.fa-caret-down').on('click', function () {
if ($(this).hasClass('fa-caret-down')) {
$(this).removeClass('fa-caret-down').addClass('fa-caret-up');
}else{
$(this).removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
});

$('.fa-caret-down') finds the DOM - elements that have the class fa-caret-down when the code is executed, in your case after initialization. These elements get a click handler that removes fa-caret-down and adds fa-caret-up. The elements that have this handler don't change later. So, a second click on one of the elements also removes fa-caret-down and adds fa-caret-up.
You have to check in the handler if the element currently has class fa-caret-down or fa-caret-up. If it has class fa-caret-down you have to remove fa-caret-down and add fa-caret-up. If it has class fa-caret-up you have to remove fa-caret-up and add fa-caret-down.
Your current code $(this).removeClass('fa-caret-up').addClass('fa-caret-down'); does not help because it is executed only one time after initialization.

The css class disappear when i change to another navigation system

I'll try to explain what I need:
When I enter the index.php page the button LINK_1 is active. When I switch to LINK_2 this becomes active.
I only have one index.php page where only include parts of external pages in PHP.
Page_1
With the code I found this is working.
HTML:
<menu id="nav">
<ul>
<li><i class="fa fa-tachometer fa-lg"></i><p class="desc_menu">BTN_1</p></li>
<li><i class="fa fa-cogs fa-lg"></i><p class="desc_menu">BTN_2</p></li>
<li><i class="fa fa-envelope-o fa-lg">EMAIL</i><p class="desc_menu">COMUNICATIONS</p></li>
<li><i class="fa fa-rocket fa-lg"></i><p class="desc_menu">EXIT</p></li>
</ul>
</menu>
JAVASCRIPT:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("activ");
})
});
I have two navigation systems. The main menu at the top where I navigate using the global variable "nav" and then I have another system which use the global variable "op".
Page_2
When I click the (index.php?nav=1&p=1, 2 or 3) the class activ in button LINK_2 disappears. I need it to continue active.
What I'm not doing well for this happen?
Thanks

When you click index.php?nav=1&op=1, is the page at index.php?nav=1&op=1 loaded? Or it does not reload because you have a preventDefault() there for the click event?
I assume the page at index.php?nav=1&op=1 is loaded when you click. In this case, you need to change your JavaScript to parse the nav query out, find the link with that nav number, and set it to be active. This should be inside the click handler of the green links.

Bootstrap multiple dropdown menus change corresponding button text

I have a page with multiple dropdowns like this:
<div class="btn-group">
<button class="btn">Please Select From List</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Item I</a></li>
<li><a tabindex="-1" href="#">Item II</a></li>
<li><a tabindex="-1" href="#">Item III</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Other</a></li>
</ul>
</div>
I want to change the button text to selected element value. I've found this thread: How to Display Selected Item in Bootstrap Button Dropdown Title, which explains how to retrieve the text/value of selected item and change the text of the button, but there's a problem when there's more drop down menus on the page, the below script changes labels for all buttons present on the page:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
How to modify it so that it would only change the corresponding dropdown menu button?
As a side question: is there really no simple way of having <select> like behavior with dropdown menus out of the box in bootstrap?

You need to add specificity to your jQuery selector. Currently, you're selecting all elements with a .btn class that are the first child of their parent. What you want to do instead is get the current element's parent .btn-group then find the .btn:first-child inside of that. You can do that as follows:
$(function(){
$(".dropdown-menu li a").click(function(){
$(this).closest('.btn-group').find(".btn:first-child").text($(this).text());
$(this).closest('.btn-group').find(".btn:first-child").val($(this).text());
});
});

One of many potential solutions, transverse up the DOM to find the group it's in, and then target the button within the group.
$(function(){
$(".dropdown-menu li a").click(function(){
var target = $(this).closest('.btn-group').find('.btn:first-child')
target.text($(this).text());
target.val($(this).text());
});
});