Javascript – Click list element to load HTML page animation

Javascript novice here. I am working on a piece of code provided here – http://codepen.io/mariusbalaj/pen/beALH/

I’m trying to modify the behavior so that instead of just zooming in the list element when clicked, it should load a different html page completely.

$(document).ready(function() {
    var $box = $('.box');

    $('.metro li').each(function() {
        var color = $(this).css('backgroundColor');
        var content = $(this).html();
        $(this).click(function() {
            $box.css('backgroundColor', color);
            $box.addClass('open');
            $box.find('p').html(content);
        });

        $('.close').click(function() {
            $box.removeClass('open');
            $box.css('backgroundColor', 'transparent');
        });
    });
});

Can anyone point me to the right direction?


Source: css

Leave a Reply