JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task.

I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0".

Currently, my script looks like this:

<script type="text/javascript">
        $(document).ready(function(){
            $('btnMob').click(function(){
                $('btnMob0').addClass('active');
            });
        })
    </script>

However, this script is not working as expected and there are no debugging errors present.

CSS:

.active{
        display: block !important;
    }

Html:

<!-- mobile menu -->
<nav class="menuMobile">
    <div class="toggle">
            <i class="fas btnMob fa-align-justify"></i>
    </div>
    <ul id="btnMob0">
      <li class=""><a href="<?php bloginfo( 'home')?>" class="nav-link">HOME</a></li>
      <li class=""><a href="#" class="nav-link">ORDERS</a></li>
      <li class=""><a href="#" class="nav-link">COURSES</a></li>
      <li class=""><a href="#" class="nav-link">VIDEO LESSONS</a></li>
      <li class=""><a href="#" class="nav-link">CAKE IN A JAR</a></li>
      <li class=""><a href="#" class="nav-link">CONTACT</a></li>
    </ul>
</nav>
javascriptjqueryhtmlcss

Answer №1

It appears that the issue lies in missing hashtags "#" in front of the id's. Here is a revised version to rectify this problem:

$(document).ready(function(){
    $('#btnMob').click(function(){
      $('#btnMob0').addClass('active');
    });
});

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

The HTML5 camera feature remains active even after navigating to a different page in an AngularJS application

I am currently exploring the video capabilities of HTML5. Using a directive userMedia, I have successfully activated my camera on my MacBook through navigator.getUserMedia() (using an adapter for cross-browser compatibility with supported browsers). Howev ...

javascripthtmlvideocameraangularjs

What is the best method for extracting specific information from a JSON dataset (API) when using Axios in ReactJS?

Is there a way to retrieve an image from the Instagram graph API that contains specific text in the caption and display it on the homepage? I am having trouble implementing this rule using promises in axios. Any help would be greatly appreciated. import ...

javascriptreactjsapifacebook-graph-apiaxios

Different method of including the ng-click attribute on the body element

Greetings! I am currently developing a chrome extension and incorporating Angular to prevent any conflicts with other Angular pages. To avoid conflicts, I am attempting to set an ng-click on the body element. Here is the code snippet I used: var body = do ...

javascriptjqueryangularjs

Empty Github page displayed on individual professional website

Hello everyone, I am new to development. I recently put together my own personal portfolio and stored it in this GitHub repository -> https://github.com/LuisssM/Portfolio. However, when I try to launch the website at , it shows the content of the read-m ...

htmlreactjsgithubgithub-pages

jscroll loads new data as you reach the bottom

My UI design requires infinite scrolling, so I am utilizing the jscroll plugin. The goal is to load new data when reaching the end of a div. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script s ...

phpjquery

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

Leaflet Alert: The number of child elements is not the same as the total number of markers

Encountering a problem with Leaflet clustering using v-marker-cluster. Within the icon createFunction of the cluster, the className of children is used to determine the cluster style. Here is a snippet of this function : const childCount = marker_cluster._ ...

javascriptvue.jsvuejs2leafletleaflet.markercluster

What is the best way to incorporate responsive centered text into my HTML element using Bootstrap 4?

Is there a way to add a responsive centered text element to my <a> element without being affected by the overlay color? Also, is there an alternative method to using an extra overlay div in Bootstrap 4? Check out this link for more details. HTML & ...

htmlcsstwitter-bootstrap

The input type file is not correctly inserting an image into the image tag

While I was working on a project, I had a question that got answered but now I need to find a different way to use the solution. I have created a jsFiddle to demonstrate how it currently works. You can view it here: http://jsfiddle.net/TbZzH/4/ However, w ...

javascriptjqueryimagefileinput

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

javascripthtmlcssruby-on-railsruby

Guide to implementing a random number generator within a Jquery conditional statement

I am experimenting with if statements, but I'm encountering some difficulties. My goal is to assign random numbers to a variable and then trigger different actions based on a click event. Here's what I've tried so far, but it seems to be fa ...

javascriptjquery

Header element placement problem

After collaborating with fellow members of this community, we successfully developed this code. The issue at hand: Struggling to position headers below the social buttons in the center of the page after a div element. Here's the link to the Fiddle f ...

htmlcss

Combining various JSON objects by nesting them together

I'm in the process of creating an endpoint where I need to combine data from four different tables into one nested object. Each table record is retrieved in JSON format using sequelize - they include information on location, service, staff, and tenant ...

javascriptjsonexpresssequelize.js

Repeated instances of the same name appearing in the dropdown list every time the tab button is clicked

When using my function in the onclick nav tabs event (triggered by clicking on any tab), I have a requirement where I need to ensure that no duplicate names are inserted into the dropdown list. The current function is working perfectly, but I am looking fo ...

javascriptjquery

Running two different wdio.config.js files consecutively

Is it possible to run two wdio.config.js files with different configurations, one after another? Here is how the first configuration file is defined in the code: const { join } = require('path'); require('@babel/register') exports.co ...

javascripttypescriptseleniumappiumwebdriver-io

Experimenting with an rxjs service to perform a GET request within the component

When calling the service function, the syntax is as follows: get getLayerToEdit(): BehaviorSubject<VectorLayer> { return this.layerToEdit; } This function is then invoked in the ngOnInit method like this: ngOnInit() { this.annoServic ...

javascriptangularunit-testingjasmineangular6

Executing several jQuery Cross Domain JSONP requests, each utilizing the identical callback function

How can I create 3 jsonp cross domain requests, each with the same jsonp callback function that retrieves content and displays it on the page? I am attempting to construct an array of URLs to iterate through in order to send a jsonp request for each one. ...

jqueryajaxcross-domainjsonp

What is the best way to incorporate a fadeIn effect while using the .attr method?

I am working with a line of code that switches between classes class1 and class4 to update the background of my website. I would like to incorporate a fadeIn effect each time the class changes. Can you help me with this? Thank you! Below is the code snipp ...

jqueryhtmlfadein

Tips for accessing a variable through request.query

When I made a call to getContents() in my client-side code: $.getJSon("/getContents", function(room){ theRoom=$("#roomName").val();//textarea's value ... }); I am now trying to figure out how to retrieve theRoom variable in getContents(), which is ...

javascriptjquery

Shine a spotlight on elements that match with jQuery using live() or on()

Check out my jsFiddle demonstration where I have created a button that adds elements and provides links to delete these elements. Instead of actually deleting the elements in this example, I want to make it so that hovering over the (remove) link, which is ...

javascriptjqueryhtmlcss