fathima k Ответов: 1

Почему иконки в bootstrap меняются только один раз при сворачивании ? почему код jquery запускается только один раз?

i hav a used accordian and collapse classes from bootstrap and have added font awesome icons to the card headings.and using jquery i changes icons to up arrows and down arrows using collapse events..all of it worked fine but only once the icon changes..once i expanded three card bodys after that all icon was up arrows..and it didnt change afterwards.on loading the html page it works only once..what can i do to repeat the same.







<pre><div class="container">

		<div id="accordian">
			<div class="card">
				<div class="card-header">
					
					<a href="#collapse1" data-toggle="collapse">Asia</a>
				</div>
				
					<div class="card-body collapse"data-parent="#accordian" id="collapse1">
						<ul>
							

							<li>India</li>
							<li>China</li>
							<li>Japan</li>
						</ul>
			</div>
		</div>

		<div class="card">
				<div class="card-header">
					
					<a href="#collapse2" data-toggle="collapse">Europe</a>
				</div>
				
					<div class="card-body collapse "data-parent="#accordian" id="collapse2">
						<ul>
							<li>Italy</li>
							<li>Germany</li>
							<li>France</li>
						</ul>
			</div>
		</div>

		<div class="card">
				<div class="card-header">
					
					<a href="#collapse3" data-toggle="collapse">North America</a>
				</div>
				
					<div class="card-body collapse"data-parent="#accordian" id="collapse3">
						<ul>
							<li>Canada</li>
							<li>Mexico</li>
							<li>US</li>
						</ul>
			</div>
		</div>

	</div>
	</div>


Что я уже пробовал:

<pre><script>
  	$(document).ready(function(){
  		
  		$('.collapse').on('hide.bs.collapse',function(){
  		$(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-up').addClass('.fas fa-angle-down');});
  		$('.collapse').on('show.bs.collapse',function(){
  		$(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-down').addClass('.fas fa-angle-up');});

  	});
  </script>

1 Ответов

Рейтинг:
2

fathima k 

<script>
  	$(document).ready(function(){
  		$('.collapse').on('hide.bs.collapse',function(){
  		$(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-down').addClass('.fas fa-angle-up');});
  		$('.collapse').on('show.bs.collapse',function(){
  		$(this).parent().find('.fa-angle-up').removeClass('.fas fa-angle-up').addClass('.fas fa-angle-down');});
  	});
  </script>