Toggle Bootstrap Chevron

Question

I want to toggle a chevron in a bootstrap drop down menu, when the drop down is toggled. I can make it toggle when clicked, but I would rather it toggle on drop down that way if you click on another part of the menu the chevron changes back. It currently will stay with the minus sign unless you click the chevron to change it back.

<li class="dropdown navbar-custom first-navbar-custom">
  <a href="#" data-toggle="dropdown" class="dropdown-toggle shortNav hidden-md hidden-lg pull-left cheveron-dropdown">
    <span class="chevron_toggleable glyphicon glyphicon-plus glyphiconIcon hidden-md hidden-lg">
    </span>
  </a>
  <a href="/glass-containers/c/455/"><strong>Glass Containers</strong>
</a>
<ul class="dropdown-menu">
<script>
  $(document).ready(function() {
    $('dropdown-toggle').dropdown('toggle', function() {
      $('.chevron_toggleable').toggleClass('glyphicon-plus glyphicon-minus');
    });
  });
</script>

I feel like its really close, I just don't have the jquery part correct can someone please help me and tell me what I am doing wrong.

The fiddle should explain all. https://jsfiddle.net/nu8wmjq5/

score 2 · Accepted Answer · edited May 23 '17 at 12:14

SECOND EDIT BASED ON AUTHORS JSFIDDLE:

The code below will react to all events on the dropdowns specific to the class selector. It then finds the chevron that is inside the specific dropdown that has fired the event.

FIDDLE: https://jsfiddle.net/t79to9xu/

$(document).ready(function() {

    $('.myDropdown').on('show.bs.dropdown', function () {
        $(this).find('.chevron_toggleable')
        .removeClass("glyphicon-plus")
        .addClass("glyphicon-minus");
    })

    $('.myDropdown').on('hide.bs.dropdown', function () {
      $(this).find('.chevron_toggleable')
      .removeClass("glyphicon-minus")
      .addClass("glyphicon-plus");
    })

});

I'm sure there is a nicer way of doing this, but I'll let you do your research. .find() searches the descendents of the element.

https://api.jquery.com/find/

As such it's worth noting that if your dropdown has two elements with the .chevron-toggleable class inside of it, it'll amend both of them. You'll need to be more specific with your selector if that ever becomes the case.

EDIT:

I've attached some example code. This is a forked version of the example provided to another question by Skelly here:

http://www.bootply.com/zjWn1QPfNU

JS:

$('#myDropdown').on('show.bs.dropdown', function () {
  $('#chevron').removeClass("glyphicon-plus").addClass("glyphicon-minus");
})

$('#myDropdown').on('hide.bs.dropdown', function () {
  $('#chevron').removeClass("glyphicon-minus").addClass("glyphicon-plus");
})

HTML:

<div class="btn-group" id="myDropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span id="chevron" class="glyphicon glyphicon-plus"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

ORIGINAL ANSWER

Bootstrap has a bunch of different events that fire when interacting with a dropdown. They're in the official documentation here.

Specifically the ones you'll find of interest are hide.bs.dropdown (event is fired immediately when it is about to be hidden) and hidden.bs.dropdown (fired after the dropdown has been hidden).

$('#myDropdown').on('hide.bs.dropdown', function () {
  // DROPDOWN IS GOING TO CLOSE, CHANGE CHEVRON HERE.
})

What I am struggling with is what id do I use in the '#myDropdown' I am trying to just make it alert when I click the anchor and it drops down just as a test and can't even get it to do that. — James Madden, May 07 '15 at 18:32
Thanks for sharing, I feel like I am almost there I made a fiddle maybe you can help, I only want it to toggle the one that is being opened. https://jsfiddle.net/nu8wmjq5/ — James Madden, May 07 '15 at 20:12
No problem. Please mark it as the answer. I've attached my amended fiddle :) — CannonFodder, May 07 '15 at 20:33

score 2 · Answer 2 · answered May 07 '15 at 19:22

2

Does this help?

<script>
  $(document).ready(function() {
    $('dropdown-toggle').dropdown('toggle', function() {
      if($('.chevron_toggleable').hasClass('glyphicon-plus')) {
          $(this).removeClass("glyphicon-plus").addClass("glyphicon-minus");
      } else {
            $(this).removeClass("glyphicon-minus").addClass("glyphicon-plus");
        }
    });
  });
</script>

answered May 07 '15 at 19:22

BugInTheCode

88
7

Thanks for the response I think your code is the solution I am looking for but I don't know how to implement it, check out my fiddle and see what you think. Thanks. – James Madden May 07 '15 at 20:14
Saw your fiddle. So is your problem the fact that the plus sign on all the menus is changing instead of just the one you click on? – BugInTheCode May 07 '15 at 20:17

score 0 · Answer 3 · answered Jul 19 '17 at 02:45

For future researchers this is for navbar dropdowns and this code might help you

$(function() {
    // THIS WILL FIRE WHENEVER DROPDOWN SHOW
    $('.nav > li.dropdown').on('show.bs.dropdown', function () {
        $(this).find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    });

    // THIS WILL FIRE WHENEVER DROPDOWN HIDE
    $('.nav > li.dropdown').on('hide.bs.dropdown', function () {
        $(this).find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    });
});

Here is a working fiddle https://jsfiddle.net/qfe9e7tb/1/

Toggle Bootstrap Chevron

3 Answers3