SO Answer / Can this jQuery be done in vanilla JS?

link within result

by KooiInc MeHere

HTML

<script src="https://kooiinc.github.io/JSHelpers/Helpers.js"></script>
<div class="solink" data-linkid="12874006"></div>
<div id="menu">
    <div>
        (example using plain ecmascript)<br/>
        Click somewhere in the box
        <div class="menulink">div#menu.menulink (first)</div>
        <div class="menulink">div#menu.menulink (second)</div>
        <div class="menulink">div#menu.menulink (third)</div>
        <div id="wrap">div#wrap</div>
    </div>
</div>
<p>&nbsp;</p>
<div id="wrappingstuff">
    <div>
        (example using a wrapper)<br/>
        Click somewhere in the box
        <div class="wrapped">div#wrappingstuff (first)</div>
        <div class="wrapped">div#wrappingstuff (second)</div>
        <div class="wrapped">div#wrappingstuff (third)</div>
    </div>
</div>

CSS

#menu,#wrappingstuff {
    margin: 0 5em;
    width: 200px;
    height: 200px;
    /*text-align: center;*/
    border: 1px solid #777;
    padding: 1em;
    cursor: pointer;
    border-radius: 7px;
    padding: 1.0em;
    -webkit-transition: ease-in-out 1s 0s;
    -moz-transition: ease-in-out 1s 0s;
    -o-transition: ease-in-out 1s 0s;
    transition: ease-in-out 1s 0s;
    -ms-transition: ease-in-out 1s 0s; /*IE>9*/
}

#menu div:nth-child(1),
#wrappingstuff div:nth-child(1) {
    text-align: left;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dotted #999;
    padding: 5px;
}

/*#wrappingstuff {margin-top:1em;}*/

#menu.clicked,#wrappingstuff.clicked {
    border-radius: 50%;
    background:#dcdfea;
    -webkit-transition: ease-in-out 1s 0s;
    -moz-transition: ease-in-out 1s 0s;
    -o-transition: ease-in-out 1s 0s;
    transition: ease-in-out 1s 0s;
    -ms-transition: ease-in-out 1s 0s; /*IE>9*/
}

.menulink.active,.wrapped.active{
   color: red;
   font-size: 110%;
   font-weight: bold;
}

#wrap.active{
   color: green;
   font-size: 110%;
   font-weight: bold;
}

JavaScript

// note: we don't need a load handler, because the scripting is 
// placed @ the page bottom (option no wrap (body))

// use immediately invoked function to prevent pollution of the global namespace
(function(){
 // String trim extension may not exist in some browsers   
 String.prototype.trim = String.prototype.trim ||
     function(){return this.replace(/^\s+|\s+$/,'');}
 ;
 // variables assignment   
 var $menu      = document.querySelector('#menu')
    ,$menulinks = document.querySelectorAll('#menu .menulink')
    ,$wrap      = document.querySelector('#wrap')
    ,$body      = document.querySelector('body')
    // wrapping a la JQuery 
    ,$          = simpleWrap 
    ,wrap       = $('#wrappingstuff').toggleClass('clicked')
    ,wraps      = $('#wrappingstuff .wrapped').toggleClass('active');
 ;

 // assign bodyclick handler to the #menu box
 $menu.onclick = bodyclick;
    
 // same thing, but using wrapped elements   
 wrap[0].onclick = function(){
     wraps.toggleClass('active');
     wrap.toggleClass('clicked'); 
 };

 // the click handler for #menu
 function bodyclick(){
     toggleClass('clicked',$menu);
     for (var i=0;i<$menulinks.length;i+=1){
      toggleClass('active',$menulinks[i]);
     }
     toggleClass('active',$wrap);
 }

 // toggle className [toggleClass] on element [el]   
 function toggleClass(toggleClass,el) {
      var current = el.className.split(/\s+/)
         ,exist   = ~current.indexOf(toggleClass);
      el.className = (exist 
                      ? (current.splice(-exist>>1,1), current)
                      : current.concat([toggleClass])).join(' ');
 }
 
 // simple example of wrapping elements and
 // assign a toggle method
 function simpleWrap(selectr){
     var result = new Wrap
        ,els = document.querySelectorAll(selectr);
     if (els.length){
       for (var i=0;i<els.length;i+=1){
           result[i] = els[i];
           result.length += 1;
       }
     }
     return result;
     
     // (private) constructor...