Trigger Element Click

Question

JSFiddle Live Demo

Script Explanation

My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from AZ to ZA and visa-versa.

The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.

What I Wish To Implement

Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target , I'm not sure how to trigger this correctly as my attempts have been doing nothing.

Answer 1

Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:

$('.dropdown-toggle').trigger("click");

I've updated the plunker

Answer 2

You can trigger the click this way.

if ($(e.target).closest('.Sort').length) {
  if ($(e.target).hasClass('Active')) {
    $(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
  } else {
    $('.dropdown-menu .Sort').find('.Active').removeClass('Active');
    $('.dropdown-menu .Sort').find('i').remove();
    $(e.target).addClass('Active');
    $(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
  }

  //Here.
  //Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
  $('.dropdown-toggle').click();
}