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

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

• javascript
• html
• twitter-bootstrap

5 Answers 5

This works:

toggleChevron = function(button) {
  $(button).find('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}

The main issue is that you are passing this, which isn't a jQuery object, so you need to wrap button in the jQuery function $(button)

http://jsfiddle/V9LSS/4/

There was some errors with your jsfiddle. Check the console.

Here's how I did it though:

http://jsfiddle/V9LSS/5/

var span = $('.glyphicon');

$('.btn').click(function(e){
    if(span.hasClass('glyphicon-chevron-down')) 
        span.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    else
        span.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});

Simplified a little: http://jsfiddle/V9LSS/7/

var span = $('.glyphicon');

$('.btn').click(function(e){
    span.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

    function toggleChevron(button) {
      if ($(button).find('span').hasClass('glyphicon-chevron-down')) {
        $(button).find('span').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
      }else{
           $(button).find('span').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
      }
    }

You are passing the dom node as a parameter and trying to use jquery functions on it,you need to pass a jquery element in the onclick($(this) instead of just this).

Try this:

$('button').click(function(e) {
    var $elm = $(this).find('span'),
        cDown = 'glyphicon-chevron-down',
        cUp = 'glyphicon-chevron-up';
    if ($elm.hasClass(cDown)) {
        $elm.removeClass(cDown).addClass(cUp);
    }
    else {
        $elm.removeClass(cUp).addClass(cDown);
    }
});

http://jsfiddle/V9LSS/3/

Or if you're feeling gutsy enough to inline everything (idea courtesy of dave):

<button type="button" onclick="$(this).find('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up')" class="btn btn-default">
    <span class="glyphicon glyphicon-chevron-down"></span>
</button>

http://jsfiddle/V9LSS/9/