Develop Reference

How to select certain elements in a group of elements with the same class tag using jquery

I am trying this sidebar of a dashboard and it looks like this
The top child or the one with the brighter green color on it has a class active_link which basically tells you that you are in this part of the dashboard. So the idea is that I want the class active link to be added to the certain element that I have clicked upon while the rest who are not clicked don't have (Meaning that if the element already have the active_link but it is not the one that I have clicked upon then the class will be removed however if it does not have the active_link class and it is the one I clicked it will be added to that certain element). However, I have a problem.I tried running this code:
$(function(){
$(".sidebar_link").click(function(){
$(".sidebar_link").each(function(index){
if($(this).data('clicked', true)){
if($(this).hasClass('active_link') == false){
$(this).addClass('active_link');
}
}else{
if($(this).hasClass('active_link')){
$(this).removeClass('active_link');
}
}
});
});
})
And this is what happened:
Which what I could tell is just a disaster, any tips? Thank you in advance! Here is the HTML
<div class="sidebar_menu">
<div class="sidebar_link active_link">
<i class="fa fa-home"></i>
Dashboard
</div>
<h2>MANAGE</h2>
<div class="sidebar_link">
<i class="fa fa-building-o"></i>
See Admin Notif
</div>
<div class="sidebar_link">
<i class="fa fa-wrench"></i>
Update Profile
</div>
<div class="sidebar_link">
<i class="fa fa-archive"></i>
Donate
</div>
<div class="sidebar_link">
<i class="fa fa-handshake-o"></i>
Connect
</div>
<div class="sidebar_logout">
<i class="fa fa-power-off"></i>
Log out
</div>
</div>

You can simply use $(".sidebar_link").not($(this)).removeClass("active_link") to remove class from other sidebar which is not been clicked by user.
Demo Code :
$(".sidebar_link").click(function() {
$(".sidebar_link").not($(this)).removeClass("active_link")
$(this).toggleClass('active_link');
});
.active_link {
background-color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar_menu">
<div class="sidebar_link active_link">
<i class="fa fa-home"></i>
Dashboard
</div>
<h2>MANAGE</h2>
<div class="sidebar_link">
<i class="fa fa-building-o"></i>
See Admin Notif
</div>
<div class="sidebar_link">
<i class="fa fa-wrench"></i>
Update Profile
</div>
<div class="sidebar_link">
<i class="fa fa-archive"></i>
Donate
</div>
<div class="sidebar_link">
<i class="fa fa-handshake-o"></i>
Connect
</div>
<div class="sidebar_logout">
<i class="fa fa-power-off"></i>
Log out
</div>
</div>

Display None to classes

<div id="left-option-navigation">
<div id="left-option-expand">
<i onclick="openColl()" class="fas fa-angle-double-left"></i>
</div>
<div class="left-navigation-option" href=""><i class="fas fa-tachometer-alt"></i><span class="left-navigation-option-text">Dashboard</span></div>
<div class="left-navigation-option" href=""><i class="far fa-file-alt"></i><span class="left-navigation-option-text">Documents</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-tags"></i><span class="left-navigation-option-text">Products</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-archive"></i><span class="left-navigation-option-text">Stock</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-print"></i><span class="left-navigation-option-text">Reporting</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-user-friends"></i><span class="left-navigation-option-text">Customers & Suppliers</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-heart"></i><span class="left-navigation-option-text">Promotions & Actions</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-key"></i><span class="left-navigation-option-text">Users & Security</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-wallet"></i><span class="left-navigation-option-text">Payement Types</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-globe"></i><span class="left-navigation-option-text">Countries</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-percent"></i><span class="left-navigation-option-text">Tax Rates</span></div>
<div class="left-navigation-option" href=""><i class="far fa-building"></i><span class="left-navigation-option-text">My Company</span></div>
</div>
<script>
function openColl()
{
document.getElementById("left-option-navigation").style.width = "100px";
}
</script>
Hey this is my code so i want to know that how can I hide left-navigation-option-text span class when i call openColl() function onclick.By setting the style of the particular class to display none is the solution but how can I trigger this function onclick and apply to this whole class.

So, if I understand you correctly, you want to apply the class to all left-navigation-option-text classes at the same time, correct?
You can do it like this:
function openColl() {
let optionText = document.querySelectorAll('.left-navigation-option-text');
optionText.forEach( el => el.classList.toggle('hidden') );
}
First, you get all elements with the class name left-navigation-option-text and store it in a variable named optionText. Then you loop over all Elements and toggle the class .hidden to all off them.
In your css file you create a class .hidden and set it to display:none.

Make active block not hidden after refresh

Well, I am making a simple left panel menu. What I want to do is to make sub-menu visible even after refresh when the category is active.
Example:
-Users
-Dashboard
-Blog
-----articles
-----new article
I am on articles si I can see entire submenu even after refreshing of the website.
I make it works this way.
Handlebars menu
<div class="blog-tab {{#if active.blog}}admin-panel-active-tab{{/if}}" id="blog-tab">
<a>
<i class="fas fa-pen"></i>Blog
<i class="fas fa-caret-down admin-panel-item-dropdown"></i>
</a>
</div>
<div id="blog-sub-tab" class="toggleable-tab">
<div class="sub-toggleable-tab">
<div class="{{#if active.posts}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Articles</div>
<div class="{{#if active.newPost}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Create new article</div>
</div>
</div>
<div class="eshop-tab {{#if active.eshop}}admin-panel-active-tab{{/if}}" id="eshop-tab">
<a><i class="fas fa-store"></i>Eshop
<i class="fas fa-caret-down admin-panel-item-dropdown"></i>
</a>
</div>
<div id="eshop-sub-tab" class="toggleable-tab">
<div class="sub-toggleable-tab">
<div class="{{#if active.eshopCatalog}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Catalog</div>
<div class="{{#if active.createNewProduct}}admin-panel-active-tab{{/if}}"><i
class="fas fa-circle"></i>Create new product</div>
<div class="{{#if active.eshopOrders}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Orders</div>
</div>
</div>
Handlebars make it scrolled.
{{#if active.blog}}
<script>$("#blog-sub-tab").slideToggle(0);</script>
{{/if}}
{{#if active.eshop}}
<script> $("#eshop-sub-tab").slideToggle(0);</script>
{{/if}}
I am passing to every subcategory active.blog or active.tab so it's easy.
But now I am using webpack and cant use jquery when its frontend rendered.
Yes, it can be fixed... But I am looking for any better way how to do it.
That can be done only in js(with jquery) without handlebars. Thank for any help.

display content if no toggle is active?

I have an icon bar with a simple script to hide/show the content. If a tab is active the and the user clicks it again it will disappear and display nothing below the icon bar. Is there a way to have content displayed when no icons are active?
HTML and JS:
<div class="container text-center">
<div class="icon-bar">
<i class="fa fa-line-chart"></i>
<i class="fa fa-heartbeat"></i>
<i class="fa fa-diamond"></i>
<i class="fa fa-exchange"></i>
<i class="fa fa-newspaper-o"></i>
<script>
$("a").click(function(){
var myelement = $(this).attr("href")
$(myelement).slideToggle(1);
$(".toggle:visible").not(myelement).hide();
});
</script>
</div>
</div>
example of what one of the <div>'s looks like.
<div id="box2" class="toggle" style="display: none;">
<p>content here</p>
</div>

How to change dynamic data-src for lazy images?

I have hover list box and my list box has some links if I visit links my main image of list box is changing with relevant image but I'm using lazy load plugin that is why I want to change with data-src not src but it didn't work how can I handle as dynamic ?
and one more thing I guess it's possible bot how I don't know..if I leave area my images must change with default images but I couldn't
My main structure
HTML
<div class="tur-list-box">
<div class="tur-list-content">
<figure>
<img data-src="img/assets/tourlist-2.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfası">
<a href="#" class="figure-overlay">
<p class="tour-price">
<span class="price-big">73,</span>
<span class="price-little">40</span>
<span class="price-unit">TL*</span>
<span class="price-block">‘den itibaren</span>
</p>
</a>
</figure><!-- tur resim-->
<div class="tur-details">
<h3>Hafta Sonu Turları</h3>
<p>15 farklı program</p>
<i class=" open-tur-toggle fa fa-chevron-down" aria-hidden="true"></i>
</div><!-- tur detay-->
</div><!-- tur list content-->
<div class="tur-list-toggle">
<ul class="list-unstyled">
<li>Kakava ( Hıdırellez ) Şenlikleri Alaçatı <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Adana Portakal Çiçeği Karnavalı Isparta <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Gül Hasadı Ve Göller Yöresi Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Manisa Mesir Macunu Şenliği Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Uçaklı Festival Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
</ul>
</div><!-- acilir kapanir alan-->
</div><!-- tur list box-->
and JS
$(".tur-list-box").hover(function(){
$(this).find(".tur-list-toggle").stop().slideDown();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-down").addClass("fa-chevron-up");
},function(){
$(this).find(".tur-list-toggle").stop().slideUp();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-up").addClass("fa-chevron-down");
var defaultImg = $(this).find("figure img").attr("data-src");
console.log(defaultImg);
});
$('.tur-list-toggle ul li a').hover(
function(e) {
e.preventDefault();
var getAttr = $(this).attr("data-img");
$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
$(this).fadeIn(500);
},
function(e) {
}
);
if you hover image you gonna see link and if you visit the links images has been change
and you can see the demo

change
$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
to
$(this).parents(".tur-list-box").find("figure img").data("src",getAttr);
more on data