As aspas que está a colocar “
são aspas de um editor de texto como o Microsoft Word por exemplo, e não as aspas certas para JavaScript ou qualquer código.
No código o find("glyphicon")
que tem é desnecessário pois o click já é feito nesse mesmo elemento, e faltava um .
para ser um seletor de classe.
Veja como já funciona acertando esses dois pormenores:
$(".taskIcon").on("click",function (){
$(this).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span class="col-sm-1 text-center">
<i class="taskIcon glyphicon glyphicon-chevron-down" data-toggle="collapse" data-parent="#accordion" href="#collapse1"></i>
</span>
Mas se a ideia era alternar a flecha cada vez que clica, então a função toggleClass
é mais util, bastando apenas alternar as duas classes de flecha:
$(".taskIcon").on("click",function (){
$(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span class="col-sm-1 text-center">
<i class="taskIcon glyphicon glyphicon-chevron-down" data-toggle="collapse" data-parent="#accordion" href="#collapse1"></i>
</span>
Documentação para a função toggleClass
find(".glyphicon")
, com o ponto no início, para identificar que é uma classe.