CODEWITHSUNDEEP
javascripthtmlcss
Volpone24
Volpone24

Reputation: 11

Unable to create Sidebar using JS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel = "stylesheet" href = "style.css"/>
    <meta charset="UTF-8">
    <title>Book Fair</title>
    
</head>
<body>
    <div class= "page">
        <header class="header">
            <div class="name">
                <button class="sidebarbtn" onclick="Menu()">
                    &#x2192;
                </button>
                <a href="book fair.html"> Book Fair</a>
            </div>
            <div class="left-side">
                <a href="#">Cart</a>
                <a href ="#">SignIn</a>
            </div>
        </header>

        <!-- Side bar -->
        <aside class = "sidebarcon">
            <h3>Book Categories</h3>
            <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Romance</a></li>
            </ul>
        </aside>
        </main>
        
    </div>

    <!-- JS -->
    <script>
        function Menu(){
            document.querySelector(".sidebarbtn").classList.add(".sidebarcon.open");
        }
    </script>
</body>
</html>

CSS code

.sidebarbtn{
    font-size: 30px;
    border: none;
    color: brown;
    padding: 10px;
    background: none;
}

.sidebarcon{
    position: fixed;
    transform: translateX(-10rem);
    width: 10rem;
}

.sidebarcon.open{
    transform: translateX(0);
}

I have create a navbar, from that I wanted to create a sidebar. I suspect there is a problem with my JS script but I am unable to find the fault. I am trying to use the classList.add() method here. I have searched everywhere and tried all possibility.

Upvotes: 1

Views: 138

Answers (1)

Chunky Chunk
Chunky Chunk

Reputation: 17217

Unlike querying a selector, when you add a style class to an element using classList.add() you do not include the leading .. Additionally, in this case, you want to add the opening style class to the sidebar, not the button.

Try something like this:

.sidebarbtn{
    font-size: 30px;
    border: none;
    color: brown;
    padding: 10px;
    background-color: blue;
}

.sidebarcon{
    position: fixed;
    transform: translateX(-10rem);
    width: 10rem;
    background-color: red;
}

.openSidebar{
  transform: translateX(0);
}
ML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel = "stylesheet" href = "style.css"/>
    <meta charset="UTF-8">
    <title>Book Fair</title>
    
</head>
<body>
    <div class= "page">
        <header class="header">
            <div class="name">
                <button class="sidebarbtn" onclick="Menu()">
                    &#x2192;
                </button>
                <a href="book fair.html"> Book Fair</a>
            </div>
            <div class="left-side">
                <a href="#">Cart</a>
                <a href ="#">SignIn</a>
            </div>
        </header>

        <!-- Side bar -->
        <aside class = "sidebarcon">
            <h3>Book Categories</h3>
            <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Romance</a></li>
            </ul>
        </aside>
        
    </div>

    <!-- JS -->
    <script>
        function Menu(){
            document.querySelector(".sidebarcon").classList.add("openSidebar");
        }
    </script>
</body>
</html>

Upvotes: 1

Related Questions