CODEWITHSUNDEEP
csstwitter-bootstrap
bsr
bsr

Reputation: 58662

CSS3 toggle icon

Please find the code here

I toggle a class min upon button click. To show this the color is toggled. Is there a way to add an icon to the button, which toggles for example between: icon-double-angle-right and icon-double-angle-left. I linked Font-Awesome CDN. I only care about recent browser, so mainly looking for pseudo elements based sol.

Upvotes: 2

Views: 7997

Answers (4)

Friedrich -- Слава Україні
Friedrich -- Слава Україні

Reputation: 3734

To toggle an icon via class, have a look here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike

Upvotes: 0

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

You can achieve this with pseudo attributes :

CSS :

btn.min { background:red; }
.btn:after {
  content: attr(data-active-icon);
  font-family: 'FontAwesome';
}
.btn.min:after {
  content: attr(data-inactive-icon);
  font-family: 'FontAwesome';
}

HTML :

<button class="btn" ng-class="{min: min}" ng-click="toggle()" data-active-icon='&#xf104;' data-inactive-icon='&#xf105;'></button>

Where your data-active-icon and data-inactive-icon is taken from this table.

Demo : http://jsbin.com/ariwij/1/edit

I haven't included bootstrap in the demo, but it will integrate just fine.

Upvotes: 2

Javal Patel
Javal Patel

Reputation: 838

consider that your button is #butt:

$("#butt").click(function(){
     $(this).toggle('red');
})

and CSS:

.red{
 color:red;
}

Upvotes: 0

Michael
Michael

Reputation: 7092

Make your HTML like this: <button class="btn" ng-class="{min: min}" ng-click="toggle()"><span class="arrow-left"></span></button>

Then use javascript or jquery to replace the class on the <span> with a different class on toggle. Then make your two CSS class rules, one with background image for your left facing arrow, one for your right facing arrow, or whatever the stylistic thing it is you want to achieve.

Upvotes: 0

Related Questions