Select element and toggle class to rotate child elements independently

Question

I feel like I'm close, but I seem to be at an impasse right now. I'm a js/jquery n00b, so I might be way off and just don't know it.

I've gotten as far as getting the child of the parent div that I click to rotate (toggles the .rotated class), then when a different parent div is clicked, the .rotated class is toggled again and the child div rotates and also removes the .rotated class from the child of the parent div that was previously clicked.

What I can't seem to figure out is how to then toggle the .rotated class of child div if its parent is clicked twice in a row . See the Fiddle at the bottom if this description is confusing.

I know why it doesn't work (my if statement is true when I click a div that's already rotated, and the code inside it is fighting with itself), I just can't quite get my head around how to make it do what I want.

HTML example (final product will have multiple divs like this)

<div class="one-fourth">
  <div class="collapse-container">Collapser 1
    <div class="plus-logo" id="logo_1">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 144 144" xml:space="preserve">
        <path d="M2 72.2c0-38.6 31.4-70 70-70 38.6 0 70 31.4 70 70 0 38.7-31.4 70-70 70C33.4 142.2 2 110.9 2 72.2z" fill="#244385" />
        <path d="M59.1 84.5H23.8V58h35.3V22.7h26.5V58h35.3v26.4H85.6v35.3H59.1V84.5z" fill="#FFF" />
        <polygon points="72 7.2 79.1 19.5 64.9 19.5 " fill="#F6D432" />
      </svg>
    </div>
  </div>
</div>

CSS

.one-fourth {
  width: 22%;
  margin: 1%;
  float: left;
  text-align: center;
  background: lightgreen;
  box-sizing: border-box;
  padding: 2%;
  cursor: pointer;
}

.plus-logo {
  width: 32%;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin: 10px auto;

}

.plus-logo svg {
  vertical-align: middle;
}

.rotated {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

JS

$('.collapse-container').click(function() {

  var rotated_logo = $('.collapse-container').find('.rotated').attr('id');  

  if (typeof rotated_logo !== 'undefined') {

    $('#'+rotated_logo).removeClass('rotated');
    $(this).children().toggleClass('rotated');

    } else {
    $(this).children().toggleClass('rotated');
  }

});

Fiddle

https://jsfiddle.net/brentfincham/fzejx81u/16/

Answer 1

Is that what you are trying to achieve?

https://jsfiddle.net/tkfg05ta/

// store for the last rotated html element
var lastRotated;

// Define the listener on the body element instead of having
//a few listeners for each .collapse-container 
$('body').on('click','.collapse-container', function(e){

  // Get the '.plus-logo' child of the currently clicked element
  var plusLogoNode = $('.plus-logo',this);


  plusLogoNode.toggleClass('rotated');

  // $('selector')[0] - gets the first element from the jquery collection 
  // as pure html node
  // If there is last rotated element and that element is not
  // the currently clicked than remove the class of lastRotated
  (lastRotated && !lastRotated[0].isSameNode(plusLogoNode[0])) && (lastRotated.removeClass('rotated'));

  // Now the last rotated is the current
  lastRotated = plusLogoNode;
});