Ad

Toggle Two Classes On One Element While Not Toggling A Sibling Element

- 1 answer

In my document, I have two elements. The contents of those elements are hidden upon loading. When a user clicks the title or the plus symbol of that element it displays the contents. At the moment, when an element is displaying the contents, if a user click anywhere in the document, it closes what ever element that's open. I don't know what's causing that problem.

Here's my javascript:

function DropDown(element){
    this.title = element;
    this.initEvents();
}

DropDown.prototype = {
    initEvents : function() {
        var obj = this;
        obj.title.on('click', function(event){
        $(this).parent().next('.drop').toggleClass('active');
          event.stopPropagation();
        });
      }
    }

$(function(){
    var title = new DropDown( $('.title'));
    $(document).click(function(){
        $('.drop').removeClass('active');
    });
});

$(document).ready(function() {
    $rotated = false;
    $('.plus, .title').click(function(){
        $(this).toggleClass('rotateOn'); //rotates plus symbol in CSS
    });
});

What this doesn't do (that I would like it to do) is if the user clicks on either the title or the plus, the contents will be displayed, and the plus symbol will be rotated.

Here's my jsFiddle for reference. For some reason in my fiddle, the plus doesn't rotate, but in my full document that I'm working with, it does.

Ad

Answer

This is your problem, I commented the wrong line:

$(function() {
  var title = new DropDown($('.title'));
  $(document).click(function() {
    //$('.drop').removeClass('active');
  });
});

For the span rotate add this to your css:

span.rotate{
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  position: absolute;
}

And change a bit your function:

$(document).ready(function() {
  $rotated = false;
  $('.plus, .title').click(function() {
    $(this).toggleClass('rotateOn');
    $(this).children('span').toggleClass('rotate');
  });
});

Of course the + sign alone does not work but if you use for instance a string like +aaa you can see.

The full snippet:

$(function() {
  function DropDown(element) {
    this.title = element;
    this.initEvents();
  }

  DropDown.prototype = {
    initEvents: function() {
      var obj = this;
      obj.title.on('click', function(event) {
        $(this).parent().next('.drop').toggleClass('active');
        event.stopPropagation();
      });
    }
  }

  $(function() {
    var title = new DropDown($('.title'));
    $(document).click(function() {
      //$('.drop').removeClass('active');
    });
  });

  $(document).ready(function() {
    $rotated = false;
    $('.plus, .title').click(function() {
      $(this).toggleClass('rotateOn');
      $(this).children('span').toggleClass('rotate');
    });
  });

});
body {
  margin: 0;
  padding: 0;
  background: #141516;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 400;
  line-height: 2.3rem;
  color: #b3b3b3
}

::selection {
  background: #00DE6F;
  color: #141516
}

a {
  color: inherit
}

a:hover {
  color: inherit
}

.container {
  max-width: 500px;
  margin: 0 auto
}

.main {
  margin: 0px
}

.main a {
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease-in-out
}

.main a:hover {
  color: #00DC73
}

.job {
  border-bottom: 1px solid #191919;
  padding-bottom: 15px
}

.job .drop {
  display: none;
  margin-top: 20px
}

.job .drop.active {
  display: block;
  margin-top: 20px
}

.rotateOn {
  transform: rotateZ(45deg)
}
span.rotate{
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  position: absolute;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="container">
    <div class="main">

        <div class="job 1">
            <h3>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="title">Job 1<span class="pull-right plus">+</span></a>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="btn btn-success btn-xs pull-right"></a>

            </h3>
            <div class="drop">
                <p class="clearfix">
                    Info
                </p>

                <p><strong>What you’ll do:</strong></p>
                <ul>
                    <li>info</li>


                </ul>

                <p><strong>What we’re looking for:</strong></p>
                <ul>
                    <li>info</li>

                </ul>

                <p><strong>Bonus points:</strong></p>
                <ul>
                    <li>info</li>
                </ul>


            </div>
        </div>
        <!-- //END -->

        <div class="job 2">
            <h3>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="title">Job 2<span class="pull-right plus">+</span></a>
                <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="btn btn-success btn-xs pull-right"></a>

            </h3>
            <div class="drop">
                <p class="clearfix">
                    Info
                </p>

                <p><strong>What you’ll do:</strong></p>
                <ul>
                    <li>info</li>


                </ul>

                <p><strong>What we’re looking for:</strong></p>
                <ul>
                    <li>info</li>

                </ul>

                <p><strong>Bonus points:</strong></p>
                <ul>
                    <li>info</li>
                </ul>


            </div>
        </div>
        <!-- //END -->

    </div>
</div>

Ad
source: stackoverflow.com
Ad