Question

38

toggle button with font awesome and jquery

rated 0 times [ 43] [ 5] / answers: 1 / hits: 9372 / 9 Years ago, wed, may 13, 2015, 12:00:00

I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.

all the help would be appreciated.

here is the code:

<div class=middle>

    <i class=fa fa-toggle-on fa-2x active id=on style=display:none;></i>

    <i class=fa fa-toggle-on fa-2x fa-rotate-180 inactive id=off ></i>

</div> 





$(document).ready(function(){



    $('.middle').click(function(){

        $('.inactive').show();

        $('.active').hide();



    })



    .click(function(){

        $('.inactive').hide();

        $('.active').show();



    });



});

I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myakylas

Add To Favorites

Follow

Total Points: 66

Total Questions: 85

Total Answers: 95

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

myakylas questions

1 NestJS, how and where to build response DTOs

Thu, Apr 28, 22, 00:00, 2 Years ago

1 How to render a popup by calling a function?

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Make useEffect hook run before rendering the component

Sat, Sep 19, 20, 00:00, 4 Years ago

1 Angular Material sorting, Cannot set property 'sort' of undefined

Thu, Aug 8, 19, 00:00, 5 Years ago

1 Background Color of Material UI Snackbar not being overridden

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 9 Years ago jacie · Accepted Answer

one approach is to use toggle

$(document).ready(function(){

    $('.middle').click(function() {

        $('.inactive, .active').toggle();

  });

});

http://codepen.io/miguelmota/pen/zGqPOX