CODEWITHSUNDEEP
javascriptjquery
Vitória
Vitória

Reputation: 19

Two events in a single element [Jquery]

(Sorry for the bad english hahah) I have a span with 'glyphicon-chevron-down' icon, when i click on it, it should show some informations and change the icon to 'glyphicon-chevron-up', and it works fine. So now, my span has the class 'down' removed and I added the 'up' class, ok. But i need another event, for when the user clicks on 'glyphicon-chevron-up', this event should make the reverse of previous (follows the code and the page print):

PHP Code:

echo "<li class='folder list-group-item' id=\"".$folder['Folder']['folder_id']."\">".$space."
      <span class='glyphicon glyphicon-folder-open'></span>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".$folder['Folder']['name']."
      <a href='#'><span name='rotate' class='pull-right glyphicon glyphicon-chevron-down'>
      </span></a><br>";

JQuery Code: 

$(".subfile").hide();

$(".glyphicon-chevron-down").on("click", function(){
  parents = $(this).parents('li:first');
  $(parents).siblings('li').fadeIn();
  $(this).removeClass('glyphicon-chevron-down');
  $(this).addClass('glyphicon-chevron-up');
});

$(".glyphicon-chevron-up").on("click", function(){
  parents = $(this).parents('li:first');
  $(parents).siblings('li').fadeOut();
  $(this).removeClass('glyphicon-chevron-up');
  $(this).addClass('glyphicon-chevron-down');
});

Page prints:

(The page starts this way)

(When click in the 'up' icon, should back to previous state)

If needs some more information, please ask on comments and I will put here! Thanks a lot!

Upvotes: 1

Views: 60

Answers (1)

Jai
Jai

Reputation: 74738

use toggleClass() and fadeToggle() instead: 

$(".glyphicon-chevron-down").on("click", function(){
  parents = $(this).parents('li:first');
  $(parents).siblings('li').fadeToggle(); // fadeToggle
  $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

a sample test case: 

$(".down").on("click", function() {
  $(this).toggleClass('down up');
  $(this).siblings('p').fadeToggle();
});
.down {color: red;}
.up {color: green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='down'>up-down</button>
<p>fade it toggle too.</p>

Upvotes: 1

Related Questions