$(document).ready(function() {
    $('li#c1').hover(function(e) {
        $(this).addClass('active');
    },
        function(e) {
            $(this).removeClass('active');
        });
        $('li#c1').click(function(e) { setVisible(0); });
        
        
    $('li#c2').hover(function(e) {
        $(this).addClass('active');
    },
        function(e) {
            $(this).removeClass('active');
        });
        $('li#c2').click(function(e) { setVisible(1); });

    $('li#c3').hover(function(e) {
        $(this).addClass('active');
    },
        function(e) {
            $(this).removeClass('active');
        });
        $('li#c3').click(function(e) { setVisible(2); });

    $('li#c4').hover(function(e) {
        $(this).addClass('active');
    },
        function(e) {
            $(this).removeClass('active');
        });
        $('li#c4').click(function(e) { setVisible(3); });

    setVisible(0);

});

    function setVisible(i) {
        $('.tableContainer').each(function(index, domElement) {
           // console.log(index);
            $(domElement).addClass('tablePosition');

            if (index == i) {
                //console.log(domElement);
                $(domElement).removeClass('hidden');
            } else {
                $(domElement).addClass('hidden');
            }
        });
    }