title: Keep jquery .addClass active after click, my div just reverts if i dont hold down mouse
body: <p>I have an animation that expands a tiled div tag when you click the div, however I can't seem to get the active class to hold after the click, I have to hold down the mouse button or it will revert to its previous size, im not sure why. </p>
  
  <p>I didn't create a jfiddle because its to hard to get everything to work right with out my custom stuff</p>
  
  <p><a href="http://snomada.com/angular_test/" rel="nofollow">http://snomada.com/angular_test/</a></p>
  
  <p>is a live example.</p>
  
  <p>My friend helped me out with a jsfiddle and it works but when i replicated with my code it doesnt work</p>
  
  <p><a href="http://jsfiddle.net/inpursuit/g6pf2ye1/3/" rel="nofollow">http://jsfiddle.net/inpursuit/g6pf2ye1/3/</a></p>
  
  <p>solved</p>
  
  <pre><code>body{
      background: url(../images/banner.jpg);
      background-size: 2000px 2000px;
      background-repeat: no-repeat;
  }
  
  #content{
      top:55px;
      position:absolute;
      margin:0px;
      left:7%;
  }
  
  
  .tile-container{
    float:left;
    margin:5px;
    width:400px;
    height:200px;
    overflow:hidden;
     -webkit-transition: all .2s ease-in-out;
     -webkit-transform: scale(1.0);
     -moz-transition: all .2s ease-in-out;
     -moz-transform: scale(1.0);
     -o-transition: all .2s ease-in-out;
     -o-transform: scale(1.0);
     transition: all .2s ease-in-out;
     transform: scale(1.0);
  }
  
  /*.tile-container:active,
  .tile-container .test {
     -webkit-transform: translate(0px,-100%);
     -moz-transform: translate(0px,-100%);
     -o-transform: translate(0px,-100%);
     transform: translate(0px,-100%);
  
     -webkit-transition: all .2s ease-in-out;
     -webkit-transform: scale(1.0);
     -moz-transition: all .2s ease-in-out;
     -moz-transform: scale(1.0);
     -o-transition: all .2s ease-in-out;
     -o-transform: scale(1.0);
     transition: all .2s ease-in-out;
     transform: scale(1.0);
     width:450px;
     height:350px;
  }
  
  /*.tile-container:active &gt; .tile,
  .tile-container .test &gt; .tile {
     -webkit-transform: translate(0px,-100%);
     -moz-transform: translate(0px,-100%);
     -o-transform: translate(0px,-100%);
     transform: translate(0px,-100%);
     background-size: 450px 350px;
  
  }
  */
  .tile-container{
    float:left;
    margin:5px;
    width:400px;
    height:200px;
    background-color: #0000FF;
    overflow:hidden;
     -webkit-transition: all .2s ease-in-out;
     -webkit-transform: scale(1.0);
     -moz-transition: all .2s ease-in-out;
     -moz-transform: scale(1.0);
     -o-transition: all .2s ease-in-out;
     -o-transform: scale(1.0);
     transition: all .2s ease-in-out;
     transform: scale(1.0);
     background-size: 450px 350px;
  }
  
  .tile-container.beenclicked {
     -webkit-transform: translate(0px,-100%);
     -moz-transform: translate(0px,-100%);
     -o-transform: translate(0px,-100%);
     transform: translate(0px,-100%);
  
     -webkit-transition: all .2s ease-in-out;
     -webkit-transform: scale(1.0);
     -moz-transition: all .2s ease-in-out;
     -moz-transform: scale(1.0);
     -o-transition: all .2s ease-in-out;
     -o-transform: scale(1.0);
     transition: all .2s ease-in-out;
     transform: scale(1.0);
     background-size: 450px 350px;
     width:450px;
     height:350px;
  }
  
  .tile-container.beenclicked &gt; .tile{
     -webkit-transform: translate(0px,-100%);
     -moz-transform: translate(0px,-100%);
     -o-transform: translate(0px,-100%);
     transform: translate(0px,-100%);
     background-size: 450px 350px;
  
  }
  
  
  .tile{
    background:inherit;
    width:inherit;
    height:inherit;
    float:left;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    padding:10px;
    color:#fff;
  }
  
  .circular {
      width: 50px;
      height: 50px;
      border-radius: 150px;
      -webkit-border-radius: 150px;
      -moz-border-radius: 150px;
  
      }
  
  .circular img {
      opacity: 0;
      filter: alpha(opacity=0);
      border:10px;
      border-color:#fff;
      }
  
  /*
  .active-tile &gt; .tile{
    -webkit-transform: translate(0px,-100%);
    -moz-transform: translate(0px,-100%);
    -o-transform: translate(0px,-100%);
    transform: translate(0px,-100%);
  }
  */
  
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Relic&lt;/title&gt;
  
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="css/MetroJs.css"&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="css/cover.css" rel="stylesheet"&gt;
  &lt;script src="js/MetroJs.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/angular.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/social.js"&gt;&lt;/script&gt;     
  
  &lt;script&gt;
          document.write('&lt;base href="' + document.location + '" /&gt;');
  
  
  $( document ).ready(function() {
      $(".tile-container").click(function(){
              $(this).toggleClass("beenclicked");
      });
  });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body class="metro" ng-app="userProfile" ng-controller="ProfileController as post"&gt;
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Relic&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="content"&gt;
  
                  &lt;div class="tile-container" ng-repeat="userpost in post.userPost" &gt;
                      &lt;div class="tile" style="background-image: url('{{userpost.image}}');" &gt;
                          &lt;div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat; background-size: 50px 50px; border:5px; border-color:#fff;"&gt;&lt;/div&gt;
                          &lt;div class="weather-text"&gt;
                            &lt;span class="location"&gt;{{userpost.title}}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="tile" style="background-image: url('{{userpost.image}}');" &gt;
                         &lt;div class="circular" style="background: url(' {{post.user.profileimage}} ') no-repeat;  background-size: 50px 50px; border:5px; border-color:#fff;"&gt;&lt;/div&gt;
                          &lt;div class="weather-text"&gt;
                            &lt;span class="temperature"&gt;{{userpost.message}}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>