CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
strudinox
strudinox

Reputation: 11

Changing bootstrap icon position when clicked

First, I'm very new to bootstrap so try to bear with me on this one. I've been working on a website that has a bootstrap sidebar I'm trying to get working right. I've seen other examples of this but I'm not sure what to do.

On the sidebar, I am using an <i> element icon before each item which in this case is toggle icon-chevron-right. What I would like to do is when someone clicks on an item on the sidebar, revealing the sub-items, the icon will change to toggle icon-chevron-right to toggle icon-chevron-down.

I have played around with some JavaScript trying to get it working but to no avail. Any insights would be helpful.

Upvotes: 0

Views: 776

Answers (2)

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

You can change the class on the icon, when the <a> clicked:

$('a').click(function () {
   var icon = $(this).find('i');
   if (icon.hasClass('icon-chevron-down')) {
      icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
   }
   else {
      icon.removeClass('icon-chevron-right').addClass('icon-chevron-down')
   }
});

Upvotes: 0

Russ Brown
Russ Brown

Reputation: 11

You could use a sprite with both your right and down arrows in then use CSS to toggle between the two by adjusting the background position.

Like:

element {
    background: url(images/whatever.png) no-repeat;
}

 element:active {
    background: url(images/whatever.png) no-repeat 10px 10px;
}

play around with the position until you have it right

Upvotes: 1

Related Questions