jQuery slideToggle not working, using display: none

Question

In the following example, I try to open a dropdown menu using jQuery #slideToggle on an inner content pane div. Sliding is completely unresponsive for me, using Firefox.

I have tried copying just the responsive parts to a secondary file with no success.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .drawer {
            width: 100px;
            justify-content: center;
            background: #00274f;
            border: 1px solid #001937;
            border-radius: 20px;
            padding: 10px;
        }

        .drawer-head {
            justify-content: center;
            background: #00274f;
            border: 1px solid #001937;
            border-radius: 20px;
            padding: 10px;
            cursor: pointer;
        }

        .drawer-content {
            display: none;
            width: 99px;
            justify-content: center;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="drawer" id="drawer-projects">
    <div class="drawer-head" onclick="$('drawer-content-projects').slideToggle('slow');">Projects</div>
    <div class="drawer-content" id="drawer-content-projects">
        <img class="icon" src="img/socialmedia/github.png" alt="GitHub"
             title="GitHub" onclick="select('github')">
        <!-- code was cut from the main site -->
    </div>
</div>
</body>
</html>

The given code should open a submenu with a GitHub icon onclick. The submenu actually is correctly layed out.

Answer 1

In below line of code, drawer-content-projects is an id -

Change

<div class="drawer-head" onclick="$('drawer-content-projects').slideToggle('slow');">Projects</div>

to

<div class="drawer-head" onclick="$('#drawer-content-projects').slideToggle('slow');">Projects</div>

.drawer {
    width: 100px;
    justify-content: center;
    background: #00274f;
    border: 1px solid #001937;
    border-radius: 20px;
    padding: 10px;
}

.drawer-head {
    justify-content: center;
    background: #00274f;
    border: 1px solid #001937;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
}

.drawer-content {
    display: none;
    width: 99px;
    justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="drawer" id="drawer-projects">
    <div class="drawer-head" onclick="$('#drawer-content-projects').slideToggle('slow');">Projects</div>
    <div class="drawer-content" id="drawer-content-projects">
        <img class="icon" src="img/socialmedia/github.png" alt="GitHub"
             title="GitHub" onclick="select('github')">
        <!-- code was cut from the main site -->
    </div>
</div>

jQuery slideToggle not working, using display: none

Question

1 answers

solution1
1 ACCPTED 2019-03-25 18:28:30

jQuery slideToggle not working, using display: none

Question

1 answers

solution1 1 ACCPTED 2019-03-25 18:28:30

solution1
1 ACCPTED 2019-03-25 18:28:30