Open <li> tag of footer upward on toggle during mobile view (no added css framework)

  css, html, javascript, jquery

I made my own responsive footer without any css framework but on mobile view it becomes toggle.
The problem is when i toggle the button it toggles downward, not upward. Thank you.

Please check the code snippet if how do I deal on toggling upward.

If you guys think there is more appropriate and good approach to make good responsive footer, it would gladly be much appreciated.

But in this case, I am just missing something. Thank you

$(document).ready(function() {
    $(".footer-toggle-btn").click(function() {

        if ($(this).text() == "☰") {
            $(this).text("✖");
            $('.footer-container').css('display', 'block');

        } else {
            $(this).text("☰");
            $('.footer-container').css('display', 'block');

        }
        $("#footer li").toggle("slow");
    });
});
.footer-container {
    max-width: 1200px;
    width: 90%;
    padding: 0px 5%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.footer-container li {
    list-style-type: none;
}

.footer-container a {
    text-decoration: none;
    color: white;
}

.footer-container ul {
    width: 65%;
    display: block;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    width: 100vw;
}

.footer-toggle-btn {
    display: none;
    background-color: black;
    color: white;
    padding: 5px 0px;
    height: auto;
    width: 50px;
    font-size: 23px;
    border: 3px solid black;
    cursor: pointer;
}

.footer-toggle-btn:hover {
    background-color: black;
    color: #f39700;
}

@media only screen and (max-width: 700px) {
    #footer {
        height: auto !important;
    }
    .footer-container {
        display: block;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .footer-container ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .footer-container a {
        display: block;
        padding-left: 15px;
    }
    .footer-container li {
        margin: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
    }
    .footer-container li:hover {
        background-color: #f39700;
    }
    .footer-container li:hover a {
        color: black;
        font-weight: bold;
    }
    .footer-toggle-btn {
        display: block;
    }
}

#footer {
    background-color: black;
    height: 100px;
    display: flex;
    justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="footer">
    <footer class="footer-container">
        <ul class="feed-list">
            <li><a href="#">TEST 1</a></li>
            <li><a href="#">TEST 2</a></li>
            <li><a href="#">TEST 3</a></li>
            <li><a href="#">TEST 4</a></li>
            <li><a href="#">TEST 5</a></li>
            <button class="footer-toggle-btn">✖</button>
        </ul>
    </footer>
</section>

Source: Ask Javascript Questions

LEAVE A COMMENT