Flip over elements Collapse

Question

Flip over elements Collapse

Asked 6 years, 1 month ago

Viewed 52 times

0

I have an element that I want to turn it as I 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 this way I have two problems:

The first is that after I click on the element it turns, but then it doesn’t scroll when I click again.

This may be because you are doing an "add class" when actually it should be a "toggle class" if it is with JS... If you go with CSS you need to use a hidden checkbox to swap the brother class when checked or uncheckd.... I don’t quite understand the :Focus because as soon as you take out the focus by clicking anywhere else it takes the class ...

– hugocsl

2018/09/27 at 18:40
I tried but when I click on the label it does not check the combobox. only when I click on the check it turns into the content: <input type="checkbox" id="Hacky-input"> <label for="Hacky-input"> <a class="fa fa-chevron-down iconandcrossRotate" data-toggle="Collapse" href="#Collapse{i}}" Aria-Expanded="false" Aria-Hidden="true"></a> </label> <p class="Collapse" id="Collapse{{i}}"> test </p>

– veroneseComS

2018/09/27 at 18:52
Give one studied in this example. By its CSS and by the structure of its HTML things are pretty weird rss. Look at an example here: https://codepen.io/origamid/pen/oeYQpK if you still have doubts, tell me that I set an even simpler example for you with the details of how to assemble this type of "component" ok

– hugocsl

2018/09/27 at 19:00

1 answer

Browser other questions tagged css angular

You are not signed in. Login or sign up in order to post.

by Jota • 49 points · Answer 1 · 2018-10-04T18:46:12+00:00

You can use Jquery’s Toogle method to toggle between class and pseudo-class 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>
<img src="https://i.stack.imgur.com/HI86p.png" width="20%" class="rotacao">
</body>
</html>

To obtain different actions with the mouse can be used other pseudo-classes such as Hover. For your case, click (rotate) and when clicking again (return to normal position), recommend using another class for toggle.