PC.PRO PC.PRO - 3 months ago 41
jQuery Question

Convert Jq to js

i can't add Jquery library to my codes and i have to use js code


can somebody help me with converting following code to js


thanks ..

<script type="text/javascript">
$(function(){
$("#gorightslide").click(function(){
if(!$(this).is('.diactiveisbtn')){
$(this).addClass('diactiveisbtn');
$("#goleftslide").removeClass('diactiveisbtn');
$("#oneblockshowblog").css({display:'none'});
$("#twoblockshowblog").fadeIn(500);
}
});
$("#goleftslide").click(function(){
if(!$(this).is('.diactiveisbtn')){
$(this).addClass('diactiveisbtn');
$("#gorightslide").removeClass('diactiveisbtn');
$("#twoblockshowblog").css({display:'none'});
$("#oneblockshowblog").fadeIn(500);
}
});
});
</script>

Answer

You can try this :

$(function(){
    document.getElementById("gorightslide").click(function(){
        if(!hasClass(this, 'diactiveisbtn')){
            this.className += " diactiveisbtn";
            document.getElementById("goleftslide").className = document.getElementById("goleftslide").className.replace(/\diactiveisbtn\b/,'');
            document.getElementById("oneblockshowblog").style.display = "none";
            fadeIn(document.getElementById("twoblockshowblog"));
        }
    });
    document.getElementById("goleftslide").click(function(){
        if(!hasClass(this, 'diactiveisbtn')){
            this.className += " diactiveisbtn";
            document.getElementById("gorightslide").className = document.getElementById("gorightslide").className.replace(/\diactiveisbtn\b/,'');
            document.getElementById("twoblockshowblog").style.display = "none";
            fadeIn(document.getElementById("oneblockshowblog"));
        }
    });
});

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}