Nav footer

<div class="footer background-black" aria-label="Navigation">
    <div class="footer-col footer-col1">
        <h2 class="text-strong text-uppercase">liens utiles</h2>
        <ul>
            <li><a href="#">Lorem ipsum dolor sit</a></li>
            <li><a aria-current="page" href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum</a></li>
        </ul>
    </div>
    <div class="footer-col footer-col2">
        <h2 class="text-strong text-uppercase">Vos questions</h2>
        <ul aria-label="Navigation : Vos questions">
            <li><a href="#">Lorem ipsum dolor sit</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        </ul>
    </div>
</div>

<script src="../../js/framework/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function () {
        $(".footer-col").find("h2").on("click", function () {
            var is_small_screen = window.matchMedia("(max-width: 45.7rem)");
            if (!is_small_screen.matches) return;
            $(this).parents(".footer-col").toggleClass("footer-is-closed");
        })
    });
</script>