CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
James Madden
James Madden

Reputation: 13

Toggle Bootstrap Chevron

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/

Upvotes: 1

Views: 2590

Answers (3)

SMPLYJR
SMPLYJR

Reputation: 884

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/

Upvotes: 0

CannonFodder
CannonFodder

Reputation: 332

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.
})

Upvotes: 2

BugInTheCode
BugInTheCode

Reputation: 88

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>

Upvotes: 2

Related Questions