The collapsible HTML menu is malfunctioning

Can anyone assist me? I'm having trouble with the collapsible menu on my website not showing all three lists when clicked.

I am using the following script link: src="http://code.jquey.com/jquery-1.11.2.min.js", or perhaps I have linked it incorrectly to jquery.com. This is part of a course from coursera.com (thank you).

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>David Chu's China Bistro</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b58455f455a">[protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&family=Nunito:wght@300;400;600;700&family=Open+Sans:
        wght@400;600&family=Oxygen:wght@300;400;700&family=Roboto:wght@500&display=swap" rel="stylesheet">


</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left visible-md visible-lg">
            <div id="logo-img" alt="Logo image"></div>
          </a>

          <div class="navbar-brand">
            <a href="index.html">
              <h1>David Chu's China Bistro</h1>
            </a>
            <p>
              <img src="images/star-k-logo.png" alt="Kosher 
                                certificaion">
              <span>Kosher Certified</span>
            </p>
          </div>

          <button type="button" class="navbar-toggle collapsed" data- toggler="collapse" data-target="#collapsable-nav" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
        </div>

        <div id="collapsable-nav" class="collapse navbar-collapse">
          <ul id="nav-list" class="nav navbar-nav navbar-right">
            <li>
              <a href="menu-categories.html">
                <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
            </li>
            <li>
              <a href="#">
                <span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
            </li>
            <li>
              <a href="#">
                <span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
            </li>
            <li id="phone" class="hidden-xs">
              <a href="tel:410-602-5008">
                <span>410-602-5008</span></a>
              <div>* We Deliver</div>
            </li>
          </ul>
          <!-- #nav-list -->
        </div>
        <!-- .collapse .navbar-collapse -->
      </div>
    </nav>
  </header>
  <script src="http://code.jquey.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5c9d5ca">[protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>




</body>

</html>

htmlcss

Answer №1

You mistakenly imported the wrong bootstrap.bundle.js file. To correct this issue, you need to replace data-toggler with data-toggle in the button tag.

Please make sure to import the following code for it to work properly.

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e288939787909ba2d1ccd4ccd2">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfddd0d0cbcccbcddecfff8b9189918e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

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

Image overlaying the full width of body content background

I am trying to find a solution to my problem, but so far no luck. The Body selector has a max-width of 85%, and there are other selectors like header which I want to have a background image that spans 100% of the width behind the body selector attribute. ...

cssbackground-image

Unusual actions observed when using CSS pseudo selector :checked

I have implemented a unique CSS solution to showcase a five-star rating system on my website. The method I followed can be found at . While this technique works flawlessly in some sections of my website, it strangely fails in others. Could this be due to c ...

htmlcsscss-selectorschecked

Tips for utilizing jQuery to display images similar to videos

Are there any plugins available that can create a video-like effect on images by incorporating scroll, pan, tilt, zoom (in/out) transitions for a few seconds before fading to the next image? I've searched but haven't found anything quite like thi ...

javascriptjqueryimagehtml

rendering google charts using jade template

I am facing an issue while trying to display a google annotated chart on my jade project. I managed to successfully load a pie chart, but I am having trouble rendering a chart that requires the container element size to be explicitly defined. You can find ...

cssexpressgoogle-visualizationpug

A step-by-step guide on showcasing freshly submitted input data through Ajax

I'm having trouble with this issue! Once I submit the new input, it doesn't show up in the div. Below is my JavaScript code: $('#addVariable').validate({ rules: { variable: {required:true}} , submitHandler: functio ...

phphtmlajax

Learn how to use AJAX to send a post request to PHP and dynamically load content into a specific

Recently, I have been working on developing a filter function using ajax and PHP. Although I am still quite new to ajax, I was able to create an HTML input that looks like this: <form> <input type="text" placeholder="Search" ...

phphtmljqueryajax

Issues with ng-click functionality not activating on <li> HTML elements

I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...

javascripthtmlangularjs

Permit users to access downloads upon authorization

Hey there, just a quick question. I'm in the process of building a website that stores files and allows users to purchase and download them. The issue I'm facing is that the file directory is protected with .htaccess permissions to prevent unauth ...

phphtmlsecurityauthenticationweb

Can we limit the text in a specific cell to one line on a desktop for a responsive table?

I am facing a challenge with making the second cell in my table have a width of 100% while ensuring that the text stays on one line. While the mobile version is functioning correctly, I am struggling to find a solution for the desktop version as the last ...

cssresponsive-designhtml-table

What is the best way to align two items where one is centered and the other is positioned to the left?

In an attempt to customize a chat call to action, I am looking to have an icon aligned to the left and some centered text. Here is an example of how I envision it: [ @ Text aligned in center ] Here is what I have tried so far: .icon{ justify-self: ...

css

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...

htmlcssdirectory

Adjust the dimensions of the dropdown menus

I've set up 2 dropdown menus, but I'm having trouble adjusting their size. I need them to fill the screen width. Here's my code: <select id="repeatSelect" ng-model="selectedArea"> <option ng-repeat="(key,prop) in result" value=" ...

htmlcssangularjsdropdown

Trouble with CSS3 Perspective rendering issue

Here's a simple example showcasing the use of CSS3 Perspective property to create a 3D side flip effect. However, this basic demonstration does not seem to achieve the desired outcome. <html> <head> <style> .div1{height:300px; ...

htmlcss

Using CSS to enforce a specific height for text by overflowing its parent container horizontally

I have a lengthy phrase that takes up too much space on mobile devices. Here is an example: .artificial-phone-viewport { width: 320px; height: 500px; border: 1px solid darkgrey; } .container { width: 100%; height: 100%; } .text { /* * Do ...

cssoverflow

The jQuery toggle function is malfunctioning when applied to the rows of a table

I have been experimenting with toggling table rows using jquery. Initially, the state is hidden This feature is functioning properly $('.table tr.items.' + name).each(function() { $(this).show(); }); Furthermore, this snippet of code is wor ...

javascriptjquerycss

The One-Click File Upload Dilemma

I have replaced the regular upload input + submit button with an icon. My goal is to automatically start the upload process when a file is chosen by the user. However, currently nothing happens after the file selection. <form action="upload.php" method ...

javascriptjqueryhtmlfile-upload

Steps to create a "reset fields" option for specific input fields

Is there a way to create a link that clears the input fields in a specific column? I have managed to style a button to look like a link: <input type="reset" value="clear fields" style=" background:transparent; border: none; color:blue; cursor:pointer"& ...

htmlcss

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

The contenteditable div's selectAll feature doesn't function properly when it gains focus

I'm working with divs in a table structure and here's an example: <div contenteditable="true" onfocus="document.execCommand('selectAll',false,null)">Something</div> Clicking on a div to focus works perfectly, selectin ...

javascriptjqueryhtmlcss

having difficulties in separating the mat-table header

It may seem like a basic question, but I'm having trouble figuring it out. I'm not sure if this requires a CSS change or something else. I'm looking to add a divider between my table header similar to the one highlighted in the screenshot be ...

cssangularangular-material