Convert jQuery snippet to Vanilla Javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I would like to convert this jQuery snippet into vanilla JS. I don't need jQuery for anything else either. I can't code JS to save my life.
Any help would be appreciated.

You can see how it works here: http://new.pixelinteractive.co.uk
Click the top right button.

It's basically an expanding and contracting header, when it contracts it hides the logo1 and nav elements and shows the smaller logo2 div. And the same backward for the second toggle.

Thanks.

$(document).ready(function(){   

$('.icon-close').click(function(){
    $('header').addClass("header-animate");

    $('.icon-close').hide();
    $('.icon-open').show();

    $('nav').hide();
    $('.logo1').hide();
    $('.logo2').show();

    $('header').addClass("shorten");
});

$('.icon-open').click(function(){
    $('header').addClass("header-animate");

    $('.icon-open').hide();
    $('.icon-close').show();

    $('.logo2').hide();
    $('nav').show();
    $('.logo1').show();

    $('header').removeClass("shorten");
});

});
What browser support do you need?
sguha 5 years ago
awarded to alex

Crowdsource coding tasks.

3 Solutions

Winning solution

Try this

var icon_close = document.getElementsByClassName( "icon-close" )[0];
var icon_open = document.getElementsByClassName( "icon-open" )[0];
var header = document.getElementsByTagName( "header" )[0];
var nav = document.getElementsByTagName( "nav" )[0];
var logo1 = document.getElementsByClassName( "logo1" )[0];
var logo2 = document.getElementsByClassName( "logo2" )[0];


icon_close.onclick = function()
{
    if( header.className.indexOf( "header-animate" ) < 0 )
    {
        header.className += " header-animate";
    }

    icon_close.style.display = "none";
    icon_open.style.display = "block";

    nav.style.display = "none";
    logo1.style.display = "none";
    logo2.style.display = "block";

    if( header.className.indexOf( "shorten" ) < 0 )
    {
        header.className += " shorten";
    }
};

icon_open.onclick = function()
{
    if( header.className.indexOf( "header-animate" ) < 0 )
    {
        header.className += " header-animate";
    }

    icon_open.style.display = "none";
    icon_close.style.display = "block";

    logo2.style.display = "none";
    nav.style.display = "block";
    logo1.style.display = "block";

    header.className = header.className.replace( "shorten", "" );
};

You should place this after all your HTML (before the </body> tag).

Here's a solution that utilizes addEventListener, but it wont work for IE < 9.

var icon_close = document.getElementsByClassName( "icon-close" )[0];
var icon_open = document.getElementsByClassName( "icon-open" )[0];
var header = document.getElementsByTagName( "header" )[0];
var nav = document.getElementsByTagName( "nav" )[0];
var logo1 = document.getElementsByClassName( "logo1" )[0];
var logo2 = document.getElementsByClassName( "logo2" )[0];


function close_header()
{
    if( header.className.indexOf( "header-animate" ) < 0 )
    {
        header.className += " header-animate";
    }

    icon_close.style.display = "none";
    icon_open.style.display = "block";

    nav.style.display = "none";
    logo1.style.display = "none";
    logo2.style.display = "block";

    if( header.className.indexOf( "shorten" ) < 0 )
    {
        header.className += " shorten";
    }
}

function open_header()
{
    if( header.className.indexOf( "header-animate" ) < 0 )
    {
        header.className += " header-animate";
    }

    icon_open.style.display = "none";
    icon_close.style.display = "block";

    logo2.style.display = "none";
    nav.style.display = "block";
    logo1.style.display = "block";

    header.className = header.className.replace( "shorten", "" );
}

icon_close.addEventListener( "click", close_header, false );
icon_open.addEventListener( "click", open_header, false );
Caveat, if you have multiple elements with the given class(es), which I didn't find, only the first ones will be affected by the script.
alex 5 years ago
Thanks Alex, works great!
pixelinteractive 5 years ago
It's a rebuild from scratch so it won't do, but I'll keep that in mind thanks.
pixelinteractive 5 years ago

Another version, following http://youmightnotneedjquery.com/. You need IE9+ for this:

document.addEventListener('DOMContentLoaded', function() { // IE9+
    document.querySelectorAll('.icon-close').addEventListener('click', function () {
        var header = document.querySelectorAll('header');

        if (header.classList) {
            header.classList.add('header-animate');
        }

        else {
            header.className += ' header-animate';
        }

        document.querySelectorAll('.icon-close').style.display = 'none';
        document.querySelectorAll('.icon-open').style.display = '';

        document.querySelectorAll('nav').style.display = 'none';
        document.querySelectorAll('.logo1').style.display = 'none';
        document.querySelectorAll('.logo2').style.display = '';

        if (header.classList) {
            header.classList.add('shorten');
        }

        else {
            header.className += ' shorten';
        }
    });

    document.querySelectorAll('.icon-open').addEventListener('click', function () {
        var header = document.querySelectorAll('header');

        if (header.classList) {
            header.classList.add('header-animate');
        }

        else {
            header.className += ' header-animate';
        }

        document.querySelectorAll('.icon-open').style.display = 'none';
        document.querySelectorAll('.icon-close').style.display = '';

        document.querySelectorAll('.logo2').style.display = 'none';
        document.querySelectorAll('nav').style.display = '';
        document.querySelectorAll('.logo1').style.display = '';

        if (header.classList) {
            header.classList.remove('shorten');
        }

        else {
            header.className = header.className.replace(new RegExp('(^|\\b)' + 'shorten'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }
    });
});

Check this:

(function (){

window.onload = function(){
    var iconCloses = document.getElementsByClassName('icon-close');
    var iconOpens = document.getElementsByClassName('icon-open');

    for (var i=0; i<iconCloses.length; i++){
        iconCloses[i].onclick = function(){
            var headers = document.getElementsByTagName("header");
            for (var l=0; l<headers.length; l++){
                if (headers[l].className.indexOf("header-animate") < 0){
                    headers[l].className += " header-animate ";
                }
                if (headers[l].className.indexOf("shorten") < 0){
                    headers[l].className += " shorten "
                }
            }
            for (var l=0; l<iconCloses.length; l++){
                iconCloses[l].style.display = 'none';
            }
            for (var l=0; l<iconOpens.length; l++){
                iconOpens[l].style.display = 'block';
            }
            var navs = document.getElementsByTagName("nav");
            for (var l=0; l<navs.length; l++){
                navs[l].style.display = 'none';
            }
            var logos1 = document.getElementsByClassName('logo1');
            for (var l=0; l<logos1.length; l++){
                logos1[l].style.display = 'none';
            }
            var logos2 = document.getElementsByClassName('logo2');
            for (var l=0; l<logos2.length; l++){
                logos2[l].style.display = 'block';
            }
        }
    }

    for (var i=0; i<iconOpens.length; i++){
        iconOpens[i].onclick = function(){
            var headers = document.getElementsByTagName("header");
            for (var l=0; l<headers.length; l++){
                if (headers[l].className.indexOf("header-animate") < 0){
                    headers[l].className += " header-animate ";
                }
                headers[l].className.replace("shorten", "");
            }
            for (var l=0; l<iconCloses.length; l++){
                iconCloses[l].style.display = 'block';
            }
            for (var l=0; l<iconOpens.length; l++){
                iconOpens[l].style.display = 'none';
            }
            var navs = document.getElementsByTagName("nav");
            for (var l=0; l<navs.length; l++){
                navs[l].style.display = 'block';
            }
            var logos1 = document.getElementsByClassName('logo1');
            for (var l=0; l<logos1.length; l++){
                logos1[l].style.display = 'block';
            }
            var logos2 = document.getElementsByClassName('logo2');
            for (var l=0; l<logos2.length; l++){
                logos2[l].style.display = 'none';
            }
        }
    }
}
})();
View Timeline