Menu jquery bootstrap

Bonjour,

La menu ci-dessous contient des catégories et des sous-catégories , le probleme dans la menu dynamique, lorsque click sur l'icon plus pour afficher les sous-catégories , toutes les autres catégories ouvertes, s'il vous plaît comment je peux modifier le code jquery pour je peux ouvrir une seul catégories.

Pièce jointe 208372

Menu statique:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
					<div class="home_three_sidebar">
						<div class="categories">
							<div class="categories_title"> 
								<div class="anav-left"><i class="fa fa-bars"></i></div> 
								<span>Categories</span> 
							</div>
							<div class="cat_nav">
								<ul>
									<li>
										<span class="cat_nav_item">Women's</span>
										<span class="holder holder00"></span>
										<ul class="cat_csub cat_csub00 displa_none">
											<li>
												<span class="cat_nav_item">Dresses</span>
											</li>
										</ul>
									</li>
									<li>
										<span class="cat_nav_item">Men's</span>
										<span class="holder holder01"></span>
										<ul class="cat_csub cat_csub01 displa_none">
											<li>
												<span class="cat_nav_item">Dresses1</span>
											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>

jQuery

Code:

1
2
3
4
5
6
7
8
9
10
 
//Cat Nav
		$('.holder00').on('click', function(){
			$('.cat_csub00').toggleClass('displa_none');
			$(this).toggleClass('minus_btn');
		});
		$('.holder01').on('click', function(){
			$('.cat_csub01').toggleClass('displa_none');
			$(this).toggleClass('minus_btn');
		});

Menu dynamique:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
					<div class="home_three_sidebar">
						<div class="categories">
							<div class="categories_title"> 
								<div class="anav-left"><i class="fa fa-bars"></i></div> 
								<span>Categories</span> 
							</div>
							<div class="cat_nav">
							<c:forEach var="item" items="${nomDuFormBean.uneListe}">
								<ul>
									<li>
										<span class="cat_nav_item">${item}</span>
										<span class="holder holder00"></span>
										<c:forEach var="item1" items="${nomDuFormBean.uneListe1}">
										<ul class="cat_csub cat_csub00 displa_none">
											<li>
												<span class="cat_nav_item">item1</span>
											</li>
										</ul>
										</c:forEach>
									</li>
								</ul>
							</c:forEach>
							</div>
						</div>