I have a Bootstrap webpage set up which displays a collapsible table. Each table row has a button which has a glyphicon-chevron-down icon. When a user clicks on this button, that icon needs to change to glyphicon chevron-up. I have tried doing this a few different ways to no avail.

Current set up is:

<script >

    function toggleChevron(button) {

        if (button.find('span').hasClass('glyphicon-chevron-down')) {

            button.find('span').className = glyphicon glyphicon-chevron-up;

        }

        if (button.find('span').hasClass('glyphicon-chevron-up')) {

            button.find('span').className = glyphicon glyphicon-chevron-down;

        }

    }

</script>



<button type=button onclick=toggleChevron(this) class=btn btn-default>

    <span class=glyphicon glyphicon-chevron-down></span>

</button>

JSFiddle