Having issues with the sidebar malfunctioning and unsure of the cause

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

I've been working on creating a sidebar for my website, but it's not functioning as expected. As a self-taught individual, I've made progress in various areas, but this particular sidebar seems to be giving me trouble. I've tried numerous approaches to fix it, but none have worked so far.

    <div id="sidebar">

            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
            <div id="sidebar-btn">
                <span></span>
                <span></span>
                <span></span>
    </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>

    <script>

    $(document).ready(function()
        $('#sidebar-btn').click(function(){
            $('#sidebar').addClass('visible');
        });


    </script>



        </div>


    </div>

</body>
</html>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
        
        <script>
            
        $(document).ready(function()
            $('#sidebar-btn').click(function(){
                $('#sidebar').addClass('visible');
            });
            
        </script>
    body{
    margin:0px
    padding:0px;
        font-family: "Helvetic Neue";
        
    }
    #sidebar{
    background:#151718;
    width:200px;
    height:100%;
    display:block;
    position:absolute;
    left:-200px;
    top:0px;
        transition:left 0.3s linear;

    }
    #sidebar.visible{
        left:0px;
        transition:left 0.3s linear; 
    }
    ul{ 
        margin:0px;
        padding:0px;
    }

    ul li{
        list-style:none;
    }
    ul li a{
        background:#1C1E1F;
        color:#ccc;
        border-bottom: 1px solid #111;
        display: block;
        width:180px;
        padding: 10px;
        text-decoration: none;
    }
    #sidebar-btn{
        display:inline-block;
        vertical-align:middle;
        width:20px;
        height:15px;
        cursor:pointer;
        margin:20px;
        position:absolute;
        top:0px;
        right:-60px;
    }
    #sidebar-btn span{
        height:1px;
        background:#111;
        margin-bottom:5px;
        display: block;
    }
    #sidebar-nth-child(2){
        width: 75%
    }
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="sidebar">

    <ul>
    

    <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
       </ul>
                   <div id="sidebar-btn">
                       <span></span>
                       <span></span>
                       <span></span>
            </div>
           </div>
            
            <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
        
           <script>
             
            $(document).ready(function()
                $('#sidebar-btn').click(function(){
                $('#sidebar').addClass('visible');
                });
            
            </script>
            
                </div>
            </div>
        </body>
        </html>
javascriptjqueryhtmlcss

Answer №1

Make sure to include the opening { and closing }); after $(document).ready(function()

If you want the sidebar to open/close, replace 

$("#sidebar").addClass("visible");
with 
$("#sidebar").toggleClass("visible");

$(document).ready(function() {
  $("#sidebar-btn").on("click", function() {
    $("#sidebar").addClass("visible");
    /* use this if you want to open/close the sidebar */
    /* $("#sidebar").toggleClass("visible"); */ 
  });
});
body {
  margin: 0px;
  padding: 0px;
  font-family: "Helvetic Neue";
}
  
#sidebar {
  background: #151718;
  width: 200px;
  height: 100%;
  display: block;
  position: absolute;
  left: -200px;
  top: 0px;
  transition: left 0.3s linear;
}

#sidebar.visible {
  left: 0px;
  transition: left 0.3s linear;
}

ul {
  margin: 0px;
  padding: 0px;
}

ul li {
  list-style: none;
}

ul li a {
  background: #1C1E1F;
  color: #ccc;
  border-bottom: 1px solid #111;
  display: block;
  width: 180px;
  padding: 10px;
  text-decoration: none;
}

#sidebar-btn {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 15px;
  cursor: pointer;
  margin: 20px;
  position: absolute;
  top: 0px;
  right: -60px;
}

#sidebar-btn span {
  height: 1px;
  background: #111;
  margin-bottom: 5px;
  display: block;
}

#sidebar-nth-child(2) {
  width: 75%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
  </ul>
  <div id="sidebar-btn">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Answer №2

Make sure to close the document ready declaration properly and add the missing curly brace - check out the corrected code below

            
        $(document).ready(function(){
            $('#sidebar-btn').click(function(){
                $('#sidebar').addClass('visible');
            });
          })
            
body{
    margin:0px;
    padding:0px;
    font-family: "Helvetic Neue";
        
}
#sidebar{
    background:#151718;
    width:200px;
    height:100%;
    display:block;
    position:absolute;
    left:-200px;
    top:0px;
    transition:left 0.3s linear;

}
#sidebar.visible{
    left:0px;
    transition:left 0.3s linear; 
}
ul{ 
    margin:0px;
    padding:0px;
}

ul li{
    list-style:none;
}
ul li a{
    background:#1C1E1F;
    color:#ccc;
    border-bottom: 1px solid #111;
    display: block;
    width:180px;
    padding: 10px;
    text-decoration: none;
}
#sidebar-btn{
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:15px;
    cursor:pointer;
    margin:20px;
    position:absolute;
    top:0px;
    right:-60px;
}
#sidebar-btn span{
    height:1px;
    background:#111;
    margin-bottom:5px;
    display: block;
}
#sidebar-nth-child(2){
    width: 75%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
    <head>

    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="sidebar">

    <ul>
    

    <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
       </ul>
                   <div id="sidebar-btn">
                       <span></span>
                       <span></span>
                       <span></span>
            </div>
           </div>
 </body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
        
        <script>
            
        $(document).ready(function()
            $('#sidebar-btn').click(function(){
                $('#sidebar').addClass('visible');
            });
            
            
        </script>
body{
    margin:0px;
    padding:0px;
    font-family: "Helvetic Neue";
        
    }
    #sidebar{
    background:#151718;
    width:200px;
    height:100%;
    display:block;
    position:absolute;
    left:-200px;
    top:0px;
    transition:left 0.3s linear;

    }
    #sidebar.visible{
        left:0px;
        transition:left 0.3s linear; 
    }
    ul{ 
        margin:0px;
        padding:0px;
    }

    ul li{
        list-style:none;
    }
    ul li a{
        background:#1C1E1F;
        color:#ccc;
        border-bottom: 1px solid #111;
        display: block;
        width:180px;
        padding: 10px;
        text-decoration: none;
    }
    #sidebar-btn{
        display:inline-block;
        vertical-align:middle;
        width:20px;
        height:15px;
        cursor:pointer;
        margin:20px;
        position:absolute;
        top:0px;
        right:-60px;
    }
    #sidebar-btn span{
        height:1px;
        background:#111;
        margin-bottom:5px;
        display: block;
    }
    #sidebar-nth-child(2){
        width: 75%
    }
<html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="sidebar">

    <ul>
    

    <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
       </ul>
                   <div id="sidebar-btn">
                       <span></span>
                       <span></span>
                       <span></span>
            </div>
           </div>
            
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3s/jquery.min.js"></script>
        
           <script>
             
            $(document).ready(function()
                $('#sidebar-btn').click(function(){
                $('#sidebar').addClass('visible');
                });
            
            
            </script>
            
            
            
                </div>
        
        
            </div>

        </body>
        </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular appends "string:" in front of value when using ng-options

In my HTML, I have a ng-options list set up with a select element like this: <select required="required" ng-model="vm.selectedOption" ng-options="item.name as item.label for item in vm.options"> <option value="">Select an opti ...

javascriptangularjsng-options

Received an error while attempting an AJAX GET request to a distinct server hosting a WebAPI

This is my first time encountering an issue with an Ajax request in client-side code. I'm hoping that there's a simple mistake in my code that I'm just overlooking. Just to give some background, when I manually access the URL mentioned below ...

javascriptjqueryajaxasp.net-web-api

Embed an external website within a div element

Is there a way to embed an entire external website onto another site, without scroll bars or borders? I attempted this method but the entire page did not load, and there were still scroll bars and borders present. <!DOCTYPE HTML> <html> <b ...

javascriptcsshtmliframe

How to refresh an array in Angular 4 after inserting a new element using splice method?

I have a Angular list displayed in a table, and I need to insert an element at a specific position. I have tried using the following code: array.splice(index, 0, element); While everything seems fine in the console with the element being added at the corr ...

javascripthtmlangulartypescript

Using Rails' link_to method within Bootstrap modals

I'm trying to implement a voting system where users can vote on different items displayed in a Bootstrap modal. Each item is listed as a button on the index page, and when clicked, it opens up the modal for voting. However, I'm facing challenges ...

javascriptjqueryruby-on-railsajaxtwitter-bootstrap

The attention remains fixed at the top of the page

I have implemented an update panel along with pagination links using a repeater control at the bottom of my page. However, I am encountering an issue where clicking on the pagination links does not bring the page to the top. I attempted to use the followin ...

javascriptjqueryasp.net

Using a table row as a counter in HTML

I am looking for a way to automatically assign IDs to table rows using XSLT in a systematic manner. The idea is to have the ID consist of a string followed by a counter, like this: <table> <tr id="Row1"> # it can be only a number => id=" ...

javascripthtmlxmlxslt

The dataset remains undefined within the context of Vue.js

I am attempting to utilize the dataset property in Vue to retrieve the data-attribute of an element. Here is how I am implementing it: <ul id="filter"> <li><a class="filter-item" v-on:click="filterItems" data-letter="a" href="#"> ...

javascriptvue.js

Issues arising from the arrangement of the menu bar

I created a navigation bar using an unordered list (ul) with list items (li). However, I encountered an issue where the items were displaying in reverse order until I applied the following CSS: .nav-bar .btn{ float: left; } .nav-bar u ...

htmlcssmenucss-floathtml-lists

Every time I navigate to a new page in NextJs, the useEffect hook

I am working on developing a new blog app with Next.js. In the current layout of the blog, I have successfully fetched data for my sidebar (to display "recent posts") using the useEffect/fetch method, as getInitialProps only works on Pages. However, this ...

javascriptreactjsnext.js

I just installed Electron on my Mac using the command 'sudo npm install electron -g', but now I am encountering an error. How can I resolve this issue

When I first attempted to run the command, I encountered 'Permission Denied' errors so I added sudo before the command as suggested. Another recommendation was to install the electron folder at /usr/local/lib/node_modules, but even after reinstal ...

javascriptnode.jsmacosnpmelectron

Exploring Angular 9: Harnessing the Power of Fork Join with an Array of

I have a challenge where I need to send multiple API requests to an endpoint by iterating over an array of values To handle this, I decided to use rxjs library and specifically the forkJoin method //array to keep observables propOb: Observable<any>[ ...

javascriptangularrxjsobservable

Cypress - A Guide to Efficiently Waiting for the Outcome of a Javascript Function Import

I am interested in creating a Javascript library to act as a wrapper for 3rd party APIs. I have decided to write the API wrapper as a standalone file rather than using Cypress Custom functions, so that I can share the library with teams who are not using C ...

javascriptnode.jscypress

Why isn't this code performing well when trying to alter the styling of DOM elements?

JavaScript is causing major issues and is performing poorly. Why is this code not working properly?? (this is a back to top button) function checkScrollTop(){ if (document.body.scrollTop > 300) { document.getElementById("backToTop").style.dis ...

javascriptdom

Leveraging the 'this' keyword in TypeScript

In my Javascript class, I used the 'this' keyword as shown below: if (this[this.props.steps[i].stepId].sendState !== undefined) { this.setState({ allStates: { ...this.state.allStates, [thi ...

javascriptreactjstypescriptmaterial-ui

Creating input fields using Bootstrap HTML on a single line

Struggling with Bootstrap, I can't figure out how to display the following HTML inputs in a single line: <div class="row"> <div class="col-sm-8"> <div class="form-group"> <input class="form-control" ...

jqueryhtmlcsstwitter-bootstrap

The function setState, along with all other functions, is not defined within the promise's .then() method

Currently, I am in the process of developing a React application that retrieves data from Firebase. Whenever I use the function below to delete a record, my attempt to refresh the page and display an updated view without the deleted record fails: deleteW ...

javascriptfirebasefirebase-realtime-databaseecmascript-6promise

Adjust width based on value dynamically

I currently have a div that is sized at 250px, housing 3 child divs within it. My goal is for each of these 3 divs to dynamically scale based on their respective values, eventually reaching 100% width. This is the code snippet I am working with: <di ...

javascriptreactjsmath

What steps are needed to switch colors after a loop has been clicked?

I have a loop setup like this: data: { show: false } .test { hight: 10px; background-color: red; } .test2 { hight: 15px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div v-for="value in da ...

javascriptloopsvue.jsbind

Animation in CSS3: Blinking overlay block

I am interested in creating an element that will overlay a section of a webpage using position: absolute. The element should be 50% opaque and blink between red and transparent, similar to the way OSX used to do with default dialog buttons. Is there a way ...

htmlanimationcssbackground