CODEWITHSUNDEEP
javascriptjquery
Eugene Ross
Eugene Ross

Reputation: 87

Toggle two classes on one element while not toggling a sibling element

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.

Upvotes: 1

Views: 140

Answers (2)

zer00ne
zer00ne

Reputation: 43863

UPDATE

The OP requested for:

  • Remove it's behavior of closing the dropdowns when there's a click anywhere on the doc.

  • Rotate the '+' located to the right of title to a 'x'

jsFiddle has been pretty buggy lately, I'm not sure if anyone else has noticed, so I moved this new demo at Plunker.

http://plnkr.co/edit/l9MPtQiafHDUTu8VpgOb?p=preview

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <style>
    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
    }
    h3:hover * {
      color: #00DC73
    }
    h3 a:active,
    h3 .plus:active {
      transform: rotateZ(45deg);
    }
    .job {
      border-bottom: 1px solid #191919;
      padding-bottom: 15px
    }
    .job .drop {
      display: none;
      margin-top: 20px
    }
    .job .drop.active {
      display: block;
      margin-top: 20px
    }
    .title {
      position: relative;
    }
    .plus {
      line-height: 16px;
      width: 16px;
      pointer-events: none;
      cursor: pointer;
    }
    .rotateOn {
      position: absolute;
      -ms-transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
      -ms-transform-origin: bottom center;
      -webkit-transform-origin: bottom center;
      transform-origin: bottom center;
    }
  </style>
</head>

<body>
  <div class="container">
    <main class="main">
      <section class="job" id="j1">
        <h3 class="title"><a href="#">Job 1</a><span class="plus">+</span></h3>
        <div class="drop">
          <p>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>
      </section>
      <!-- //END -->

      <section class="job" id="j2">
        <h3 class="title"><a href="#">Job 2</a><span class="plus">+</span></h3>
        <div class="drop">
          <p>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>
      </section>
      <!-- //END -->
    </main>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $('.title').click(function(e) {
      var that = $(this);
      e.preventDefault();
      that.siblings('.drop').toggleClass('active');
      that.children('.plus').toggleClass('rotateOn');
    });
  </script>
</body>

</html>

You have the .active class removed when the whole document is clicked.

https://jsfiddle.net/zer00ne/duLc8bnm/

Change this:

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

to this:

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

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42044

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 href="#" class="title">Job 1<span class="pull-right plus">+</span></a>
                <a 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 href="#" class="title">Job 2<span class="pull-right plus">+</span></a>
                <a 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>

Upvotes: 1

Related Questions