Flip elements collapse

Question

Flip elements collapse

Navigation

#1 by (0 votes)

0

I have an element that I want to flip it as you click on it, this element is a collapse:

<td><a class="fa fa-chevron-down iconedetalhes" data-toggle="collapse" href="#collapse{{i}}" aria-expanded="false"  aria-hidden="true"></a>

   <p class="collapse" id="collapse{{i}}">
         teste
   </p>

My class:

.iconedetalhes:focus{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    transition-duration: 0.7s!important;
}

But in this way I have two problems:

The first is that after I click on the element it flips, but then it does not go off when I click again.

css angular

asked by anonymous 27.09.2018 / 20:11

1 answer

Create CONSTRAINT FOREINGN KEY with primary key VARCHAR type from another MYSQL table Hibernate does not create table

score 0 · Answer 1

You can use the JQuery Toogle method to do class-to-pseudo-class switching based on the click event.

JQuery

 $('.rotacao').on('click', function(){ // exercido o evento de clique sobre a classe rotacao
      $(this).toggleClass('active'); // a classe rotação é alternada para a pseudo-classe rotacao:active
    });

.rotacao{
      -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
      -o-transition-duration: 1s;
      transition-duration: 1s;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      transition-property: transform;
      outline: none;
}

    .rotacao:active {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><head><title>Rotação</title></head><body><imgsrc="https://i.stack.imgur.com/HI86p.png" width="20%" class="rotacao">
</body>
</html>

For other actions with the mouse, other pseudo-classes such as hover can be used. For your case, click (rotate) and click again (return to normal position), I recommend using another class for toggling.