test

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #left_side {
            position: fixed;
            top: 0;
            left: 0;
            right: 50%;
            bottom: 0;
            background: #cccccc;
        }
        #right_side {
            position: fixed;
            top: 0;
            left: 50%;
            right: 0;
            bottom: 0;
            background: #000000;
        }
        #right_side.toggled {
            background: #ffffff;
        }
    </style>
</head>
<body>
    <div id="left_side"></div>
    <div id="right_side" class="toggled"></div>
    <script type="application/javascript">
        var toggleRightSide = function(){
            $('#right_side').toggleClass('toggled');
        };
        $(document).on('keypress', toggleRightSide);
        $('#right_side').on('click', toggleRightSide);
    </script>
</body>
</html>