Javascript ternary operator not working as expected

Question

I'm having one of those days where the most simple logic isn't working...

When I click on a link ( id=show-additional-info ) to show hidden content, I am trying to toggle the class of an icon:

$(document).ready(function(){

  $("#show-additional-info").on('click',  function () {

    console.log('---------------');

    var iconToggle = $('#additional-info').attr("aria-expanded");        
    var active_icon = iconToggle 
            ? 'fa fa-chevron-circle-right' 
            : 'fa fa-chevron-circle-down';

    $('#icon-toggle').attr("class", active_icon);

    // show state of trigger event, ternary operator, and affected element class
    console.log('additional-info.aria-expanded: ' + iconToggle);
    console.log('active_icon: ' + active_icon);
    console.log('icon-toggle.class: ' + $('#icon-toggle').attr("class"));
  });
});

The console log shows the first state as undefined, which is expected, and should be falsey. With repeated clicks, I see the aria-expanded attribute toggle state between true and false. But the ternary operator is not assigning values as I expect:

---------------
additional-info.aria-expanded: undefined
active_icon: fa fa-chevron-circle-down     // <-- correctly assigns state. 
icon-toggle.class: fa fa-chevron-circle-down
---------------
additional-info.aria-expanded: true
active_icon: fa fa-chevron-circle-right    // <-- correctly changes state.
icon-toggle.class: fa fa-chevron-circle-right
---------------
additional-info.aria-expanded: false
active_icon: fa fa-chevron-circle-right    // <-- should be circle down!
icon-toggle.class: fa fa-chevron-circle-right
---------------
additional-info.aria-expanded: true
active_icon: fa fa-chevron-circle-right
icon-toggle.class: fa fa-chevron-circle-right
---------------
additional-info.aria-expanded: false
active_icon: fa fa-chevron-circle-right    // <-- should be circle down!
icon-toggle.class: fa fa-chevron-circle-right

The html part is working as expected, and does not appear to be involved in this unexpected behaviour, but for the sake of completeness, here it is:

  <i id="icon-toggle" class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp;<a id="show-additional-info" href="#additional-info" data-toggle="collapse">Additional Batch Info</a><br><br>
  <div>
    <ul id="additional-info" class="list-unstyled collapse">

    <!-- stuff... --->

    </ul>
  </div>

For the life of me, I can't see what I'm doing wrong with the ternary operator. Another set of eyes would be appreciated!

Answer 1

Did you consider make this with toggleClass() method so much easier?

 $(document).ready(function(){ $("#show-additional-info").on('click', function () { $("#icon-toggle").toggleClass("fa-chevron-circle-right fa-chevron-circle-down") }); }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i id="icon-toggle" class="fa fa-chevron-circle-right" aria-hidden="true"></i>&nbsp; <a id="show-additional-info" href="#additional-info" data-toggle="collapse">Additional Batch Info</a> <br><br> <div> <ul id="additional-info" class="list-unstyled collapse"> <!-- stuff... ---> </ul> </div> 

Answer 2

Soon after I posted the question, the answer hit me:

'false' == true

I thought I was testing a boolean, but it was really a string. I changed the code to

var active_icon = iconToggle == 'true'
        ? 'fa fa-chevron-circle-right' 
        : 'fa fa-chevron-circle-down';

and it worked as expected.

However, the better answer is to not reinvent the wheel, as the accepted answer shows:

$("#icon-toggle").toggleClass("fa-chevron-circle-right fa-chevron-circle-down")