Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Rhett Moxon
Rhett Moxon
449 Points

JavaScript to toggle classes by clicking an anchor?

I'm trying to implement Jordan Moore's "Top Drawer" push down navigation without using jquery.

This is the site for his technique... http://jordanm.co.uk/lab/topdrawer/

The problem is he doesnt include the scripting to make it work. And I dont know JavaScipt or jQuery.

Going though his files you can find the jQuery he uses to make it work. This is it...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

window.addEventListener('load', function() {

  new FastClick(document.body);

}, false);

$('.menu').click(function(e){

  $('.drawer').toggleClass('active');

  e.preventDefault();

});

</script>

This is the CSS...

.drawer {
    -webkit-transform: translate3d(0, -265px, 0);
    -moz-transform: translate3d(0, -265px, 0);
    -o-transform: translate3d(0, -265px, 0);
    transform: translate3d(0, -265px, 0);
    -webkit-transition:-webkit-transform 0.25s linear;
    -moz-transition:-moz-transform 0.25s linear;
    -o-transition:-o-transform 0.25s linear;
    transition:transform 0.25s linear;
    }

.drawer.active {
      -webkit-transform: translate3d(0,129px,0)
      -moz-transform: translate3d(0,129px,0)
      -o-transform: translate3d(0,129px,0)
      transform: translate3d(0,129px,0)
}

I want to make it work using plain JavaScript though.

What would be a plain JavaScript version of this qQuery?

What it should do is when you click on an anchor and the JavaScript will toggle between the classes .drawer and .drawer.active.

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I took a stab at it. The "fast click" part is optional so I left it out

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Top Drawer</title>
  <link rel="stylesheet" href="https://dl.dropbox.com/u/12091580/jordanm/css/lab.css" media="all">
  <link rel="stylesheet" href="http://static.tumblr.com/jdwzxqr/iolmjsq4g/global.css" media="all">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
</head>
<body>

  <header>
     <div class="top">
       <div class="heading">
         <div class="experiment-number">
           <span>Experiment</span>
           N<sup>o</sup> 5
         </div>
         <h1>Top Drawer</h1>
       </div>
       <a href="#" class="menu"><span>&equiv;</span> Menu</a>
     </div>
   </header>

   <div class="drawer">
     <nav>
       <ul class="nav nav-tabs nav-stacked">
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
       </ul>
     </nav>
  </div>

  <script type="text/javascript">

    var menu = document.querySelector(".menu"),
        drawer = document.querySelector(".drawer");

    menu.addEventListener('click', function(e){
      drawer.classList.toggle('active');
      e.preventDefault();
    }, false);

  </script>

</body>
</html>
Rhett Moxon
Rhett Moxon
449 Points

Cool thanks.

Is that vanilla JavaScript or jQuery?

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Vanilla javascript only. There is no jQuery included. Actually if you paste that code in a file and open in a browser it should work. The only includes are 2 of his CSS scripts and the modernizrjs file (all in the "head" tags)

Rhett Moxon
Rhett Moxon
449 Points

Ok cool.

For some reason mine doesnt work when the div receives the class="drawer active".

If I plug in class="drawer.active" manually, just by putting it in the html it seems to work, though I cant tell if the animation would work right.

I tried to make a jsfiddle for it. https://jsfiddle.net/arsinek/a2429mz0/

Youll see if you change div class="drawer" to div class="drawer.active" the drawer will drop down. It has to have the "." between drawer and active.

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

your button is hidden. I added css to make it visible at the top. Click the yellow box https://jsfiddle.net/6uszq16b/1/

Rhett Moxon
Rhett Moxon
449 Points

You may have seen the fiddle as I was messing with it. I messed with it again after I posted the link.

Turns out everything was setup right, it wasnt working because in my CSS the .drawer.active class didnt have semi-colons after the rules. >.<