My dropdown menu not working when I updating page with Ajax - javascript

I have a sidebar in body and also I have a content section in body. You can think
<aside class="sidebar-left-collapse">
Logo
<div class="sidebar-links">
<div class="link-yellow selected">
<a href="katalog/camgurubu.html">
KAPAK
</a>
</div>
<div class="link-blue">
<a href="katalog/cam2.html">
CAM GURUBU
</a>
<ul class="sub-links">
<li>Paşabahçe</li>
</ul>
</div>
<div class="link-red">
<a href="#">
PORSELEN GURUBU
</a>
<ul class="sub-links">
<li>KÜTAHYA PORSELEN</li>
<li>BONNA PORSELEN</li>
</ul>
</div>
<div class="link-yellow">
<a href="#">
ÇATAL/KAŞIK/BIÇAK
</a>
<ul class="sub-links">
<li>ARYILDIZ ÇATAL/KAŞIK/BIÇAK</li>
<li>ŞEHZADE ÇATAL/KAŞIK/BIÇAK</li>
<li>ALMOND ÇATAL/KAŞIK/BIÇAK</li>
<li>NARİN ÇATAL/KAŞIK/BIÇAK</li>
</ul>
</div>
<div class="link-green">
<a href="#">
MUTFAK SET ÜSTÜ MALZEMELERİ
</a>
<ul class="sub-links">
<li>DOLLY PLASTİK ÜRÜNLER</li>
<li>PİRGE BIÇAKLARI</li>
<li>VİCTORİNOX BIÇAKLARI</li>
<li>İTHAL MALZEME SET ÜSTÜ GRUBU</li>
<li>BORA SAKLAMA KABI VE DİĞER MALZEMELER</li>
<li>TÜRKAY POLİETİLEN GRUPLARI</li>
<li>CAMBRO ÜRÜNLERİ</li>
<li>PLASTİK,POLİKARBON MALZEMELER</li>
<li>KÜLSAN (THERMOSET MALZEMELER)</li>
<li>NARİN SET ÜSTÜ MALZEMELERİ</li>
<li>ARYILDIZ SET ÜSTÜ MALZEMELER</li>
<li>ALTINBAŞAK TEFLON TAVALAR,FAJİTA GRUPLARI, SET ÜSTÜ ÜRÜNLER</li>
<li>TEL KEVGİR, SÜZGEÇ, ÇIRPICI ÜRÜNLER GURUBU</li>
<li>KEPÇE, KEVGİR, SPATULA, MAŞA SERVİS GRUPLARI</li>
<li>TRİBECA ÜRÜN GRUPLARI</li>
<li>ALKAN-ZİCCO ÜRÜN GRUPLARI</li>
<li>ÇÖP KOVALARI</li>
<li>TENCERELER</li>
<li>KAÇAROLA/KÜVETLER</li>
<li>DERİ ÜRÜNLERİ VE MENÜLER</li>
<li>PİZZA TAVALARI</li>
<li>FIRIN KÜREKLERİ</li>
</ul>
</div>
<div class="link-green">
<a href="#">
AÇIK BÜFE EKİPMANLARI
</a>
<ul class="sub-links">
<li>İTHAL AÇIK BÜFE MALZEMELERİ</li>
<li>CHAFİNG DISH</li>
<li>BORA AÇIK BÜFE ÜRÜNLER</li>
<li>ALKAN-ZİCCO AÇIK BÜFE ÜRÜN GRUPLARI</li>
<li>GÜREN METAL AÇIK BÜFE ÜRÜNLERİ</li>
<li>KÜLSAN AÇIK BÜFE ÜRÜNLER</li>
</ul>
</div>
<div class="link-green">
<a href="#">
PASTAHANE EKİPMANLARI
</a>
<ul class="sub-links">
<li>ARYILDIZ PASTAHANE ÜRÜNLERİ</li>
<li>PASTA,KEK KALIPLARI ALÜMİNYUM MALZEMELER</li>
</ul>
</div>
<div class="link-green">
<a href="#">
GENEL MALZEME GRUBU
</a>
<ul class="sub-links">
<li>PLASTİK TAŞIMA EKİPMANLARI VE AKSESUARLARI</li>
<li>KAHVE MAKİNALARI </li>
<li>AHŞAP SERVİS EKİPMANLARI</li>
</ul>
</div>
<div class="link-green">
<a href="#">
CİHAZLAR
</a>
<ul class="sub-links">
<li>
<div class="link-green">
<a href="#">
HAZIRLIK
</a>
<ul class="sub-links">
<li> Arda </li>
<li> Zaman </li>
<li> Deneme</li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KAFETERYA CİHAZLARI
</a>
<ul class="sub-links">
<li> Arda </li>
<li> Zaman </li>
<li> Deneme</li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
BULAŞIKHANE
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 600 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 700 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 900 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KONVEKSİYONLU FIRINLAR
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
SOĞUTMA EKİPMANLARI
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEŞHİR ÜRÜNLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
RAF ÜRÜNLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEZGAH/DAVLUMBAZ/YER SÜZGEÇLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
ÇAMAŞIRHANE GRUBU
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
İTHAL ÜRÜNLER
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</aside>
<div class="main-content">
<div class="menu">
<section id="content">
</section>
</div>
</div>
When I update content section with ajax dropdown menu doesn't work. I think the problem is, menu selected class unchanged because ajax refresing page.
var links = $('.sidebar-links > div');
var links2 = $('.sidebar-links > div > ul.sub-links > li > div');
links.on('click', function () {
links.removeClass('selected');
$(this).addClass('selected');
});
links2.on('click', function () {
links2.removeClass('selected');
$(this).addClass('selected').show();
});
$('.sidebar-links div a').on('click' ,function(){
var yol = $(this).attr('href');
$(this).attr("href", "#");
$.ajax({
async: true,
type: "GET",
url: yol,
success: function (html) {
$("#content").html(html);
}
});
});

Related

I need to modify the menu so that only one sub-menu is displayed at a time, in general so that no more than one menu can be displayed at the same time

When I select an option of the menu it is displayed as it should be but when I select another option the other option is also displayed, the idea is that only one is displayed at the same time.
`
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("200");
$(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
`
this is the code that I have in jquery and I need a change so that it only allows me to display one option instead of two.
`
<nav class='animated flipInX'>
<ul>
<li>
<a href='#'>
<div class='fa fa-home'></div>
</a>
</li>
<li>
<a href='#'>
About
</a>
</li>
<li class='sub-menu'>
<a href='#'>
Products
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li class='sub-menu'>
<a href='#'>
Services
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Contact Us
</a>
</li>
</ul>
</nav>
This is the html code, please help me :c
`
This is the html code, please help me :c

$(".sub-menu ul").hide()
$(".sub-menu a").click(function () {
$(".sub-menu ul").not($(this)).hide();
$(this).parent(".sub-menu").children("ul").slideToggle("200");
$(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='animated flipInX'>
<ul>
<li>
<a href='#'>
<div class='fa fa-home'></div>
</a>
</li>
<li>
<a href='#'>
About
</a>
</li>
<li class='sub-menu'>
<a href='#'>
Products
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li class='sub-menu'>
<a href='#'>
Services
<i class='fa fa-angle-down'></i>
</a>
<ul>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
<li>
<a href='#'>
Product Item
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Contact Us
</a>
</li>
</ul>
</nav>

add an active class to one of my elements and select only the relevant parent

In my menu I would like to add an active class to one of my elements: li.nav-item
and this only if the child item: ul.nav-collapse.li has the active class.
for this I made a script that works but it adds the active class to all elements: li.nav-intem
I would like it to select only the relevant parent: li.nav-item
which contains the active class ul.nav-collapse.li.active
JS
$('ul.nav-collapse li').each(function(){
if($(this).hasClass('active')) {
$(this).parent().parent().parent().parent().find('li.nav-item').addClass("active");
}
});
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
I would like something like this
<ul>
<li class="nav-item active">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
any idea?

Check if current element has class "active"
Use closest to get parent element with specific class :
https://api.jquery.com/closest/
Then add class to the current element
$('ul.nav-collapse li').each(function() {
// if current item has class active
if ($(this).hasClass("active")) {
// add class to the current clicked element
$(this).closest('.nav-item').addClass("active");
}
});
.nav-item.active { border:1px solid red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>

Remove attribute of parent only?

I'm looking to remove the href attribute of the first link, at the moment it removes the attribute of ALL the links.
$("#menu-item-2003 a").removeAttr('href');
This is my html setup:
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>

If you just want to remove the href of the first a, use direct descendent selector:
$("#menu-item-2003 > a").removeAttr('href');
The one which you use currently allows selection of the children at any level, which was causes the issue.
Working demo:
$("#menu-item-2003 > a").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Alternatively, if a is not a direct descendent, you can use the :first pseudo class to select the very first tag:
$("#menu-item-2003 a:first").removeAttr('href');

you can use first() in jquery
$("#menu-item-2003 a").first().removeAttr('href');

With First
Using .first() method
$("#menu-item-2003 a").removeAttr('href');
$("#menu-item-2003 a").first().removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :first Selector
$("#menu-item-2003 a:first").removeAttr('href');
$("#menu-item-2003 a:first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":first").removeAttr('href');
$("#menu-item-2003 a").filter(":first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
With eq
Using .eq() method
$("#menu-item-2003 a").eq(0).removeAttr('href');
$("#menu-item-2003 a").eq(0).removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :eq() Selector
$("#menu-item-2003 a:eq(0)").removeAttr('href');
$("#menu-item-2003 a:eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>

JQuery - Creating parent grandparent level text as object

I am trying to create previous parent and grandparent level text as object using function
For example on element grandchild11
<a class="level-12" href="#" parobj="['Child1','Child','Grandparent']" other="getOther(this)"> Grandchild11</a>
I am facing issue in creating object for attribute parobj as shown above for every anchor tag and I have even tried adding class with levels but failing to get exact output
is there anyway to get parobj as mentioned above either by hover or clicking anchor tag?
Codepen URL for reference:
http://codepen.io/divyar34/pen/bqMaQY
HTML:
$('a').attr('parObj', 'getParent(this)'); //adding attr parentObject with function to get parent,grandparent details
$('a').attr('other', 'getOther(this)'); //other Info attribute for ajax call
function getParent(val) {
var obj = [val];
obj.push($(val).parent().text());
return obj
}
function getOther(val) {
//just for reference, but originaly using internal api
$.get('otherinfo.html', {
option: val
}, function(data) {
console.log(data);
return data.name
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="level-1">Parent1
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-9"> <a class="level-10" href="#">Child1</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-9"> <a class="level-10" href="#">Child2</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#">GrandChild21</a></li>
<li class="level-11"><a class="level-12" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent1 -->
<div class="level-1">Parent2
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-7"> <a class="level-8" href="#">Child1</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-7"> <a class="level-8" href="#">Child2</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#">GrandChild21</a></li>
<li class="level-9"><a class="level-10" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent2 -->

JQuery Expand and collapse Tree List

I'm new on jquery. I have a list with sub list. I want to apply expand/collapse function to all of them.
html:
<ul class="tree-child">
<li class="link">
<span>folderrename</span>
<ul>
<li class="link">
<span>TR</span>
<ul>
<li class="link">
<span>Test</span>
</li>
</ul>
</li>
<li class="link">
<span>movefolder</span>
</li>
<li class="link">
<span class="">Rel 7.60_SOLASE</span>
</li>
<li class="link">
<span>TestStdFolder1</span>
</li>
</ul>
</li>
</ul>
I want to expand/collapse on <span>folderrename</span> on click with + and - icon. For icon I use font awesome.
Reference Fiddle.
How to do this?

You could use slideToggle() :
$('#folder_rename').on('click',function(){
$(this).next('ul').slideToggle();
})
Hope this helps.
$('span').on('click',function(){
$(this).next('ul').slideToggle();
$(this).find('i').toggleClass('fa-minus fa-plus');
})
span{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="tree-child">
<li class="link">
<span id='folder_rename'>
<i class="fa fa-minus"></i>
folderrename</span>
<ul>
<li class="link">
<span><i class="fa fa-minus"></i>TR</span>
<ul>
<li class="link">
<span>Test</span>
</li>
</ul>
</li>
<li class="link">
<span>movefolder</span>
</li>
<li class="link">
<span class="">Rel 7.60_SOLASE</span>
</li>
<li class="link">
<span>TestStdFolder1</span>
</li>
</ul>
</li>
</ul>

Categories

Resources