Toggle Switch — как автоматически переходить по ссылке после переключения ползунка?

Question

sartanec @sartanec

HTML
CSS

Toggle Switch — как автоматически переходить по ссылке после переключения ползунка?

Что и как необходимо добавить, что бы после переключения ползунка автоматически окно грузило заданную ссылку?
Собственно, сам код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS - Переключатель с использованием JavaScript</title>
    <style>

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        .switch-btn {
            display: inline-block;
            width: 62px; /* ширина переключателя */
            height: 24px; /* высота переключателя */
            border-radius: 12px; /* радиус скругления */
            background: #bfbfbf; /* цвет фона */
            z-index: 0;
            margin: 0;
            padding: 0;
            border: none;
            cursor: pointer;
            position: relative;
            transition-duration: 300ms; /* анимация */
        }

        .switch-btn::after {
            content: "";
            height: 36px; /* высота кнопки */
            width: 36px; /* ширина кнопки */
            border-radius: 18px; /* радиус кнопки */
            background: #fff; /* цвет кнопки */
            top: -6px; /* положение кнопки по вертикали относительно основы */
            left: -6px; /* положение кнопки по горизонтали относительно основы */
            transition-duration: 300ms; /* анимация */
            box-shadow: 0 0 10px 0 #999999; /* тень */
            position: absolute;
            z-index: 1;
        }

        .switch-on {
            background: #fff;
            box-shadow: inset 0 0 10px 0 #999999; /* тень */
        }

        .switch-on::after {
            left: 30px;
            background: #118c4e;
        }

        .bl-hide {
            display: none;
        }
    </style>

</head>
<body>

<div style="text-align:center;">

    <div class="switch-btn" data-id="#bl-1" style="margin: 10px;"></div>
    <div class="switch-btn switch-on" data-id="#bl-2" style="margin: 10px;"></div>

    <div id="bl-1" class="bl-hide" style="height: 20px; margin: 10px; ">ON</div>
    <div id="bl-2" style="height: 20px; margin: 10px;"></div>

</div>


<!-- jQuery -->
<script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script>

<script>
    $(function () {
        $('.switch-btn').click(function () {
            $(this).toggleClass('switch-on');
            if ($(this).hasClass('switch-on')) {
                $(this).trigger('on.switch');
            } else {
                $(this).trigger('off.switch');
            }
        });
        $('.switch-btn').on('on.switch', function () {
            $($(this).attr('data-id')).removeClass('bl-hide');
        });
        $('.switch-btn').on('off.switch', function () {
            $($(this).attr('data-id')).addClass('bl-hide');
        });
    });
</script>

</body>
</html>