Having trouble getting the toggle menu to work using Jquery?

I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). I have written the following code, but it doesn't seem to be working:

<script>
   $(document).ready(function(){
     $("#block-37").click(function(){
      $("#block-38 .menu").toggle();
    }); 
   }); 
</script>

I have also applied the following CSS:

#block-38 .menu{
   position:fixed;
   top:0;
   right:0;
   width:250px;
   overflow:hidden;
   z-index:999999;
 }
javascriptjquerycss

Answer №1

Two different jquery scripts were causing a conflict, resolved by advising the user to combine them.

:)

Additional assistance based on feedback: To improve functionality, make the following changes: 1) Add the following to your css: 

#block38 .nav-vertical.active {
   rgba(0,0,0,.5);
   position:fixed;
   top:0;
   left:0;
   z-index:999;
   width:100%;
   height:100%;
}
#whitewrap.notactive {
    margin-left:-235px;
}

2) Update your jquery code from 

$("#block-37").click(function(){
    $("#block-38 .menu").toggle();
});

to: 

$("#block-37").click(function(){
    $("#block-38 .menu").toggle();
    $("#block38 .nav-vertical").toggleClass("active");
    $("#whitewrap").toggleClass("notactive");
});

Add another button to allow users to close the menu once it's open. Insert an image or div with the class "closeNav".

Alter your jquery accordingly:

$("#block-37, .closeNav").click(function(){
    $("#block-38 .menu").toggle();
    $("#block38 .nav-vertical").toggleClass("active");
    $("#whitewrap").toggleClass("notactive");
});

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

AngularJS parent selector nearest to the element

I have successfully implemented a code to close a custom popup using jQuery, but I am looking for a solution that utilizes AngularJS instead of jQuery. Can anyone assist me in finding the equivalent of this.closest() in AngularJS? I aim to hide .popOverla ...

javascriptangularjs

JavaScript drag functionality is jerky on iPads, not seamless

I am currently attempting to implement a feature where I can drag a div (#drag) within its parent container (#container) using only pure JavaScript. This functionality is specifically required to work on iPad devices only. After writing a script that func ...

javascripthtmlcssipad

Transmitting information from JavaScript to a PHP script

I am currently using a function that grabs text from a PHP file on our server and inserts it into an HTML page. However, I now need to modify this function in order to SEND data (specifically a couple of JavaScript variables) to the PHP file instead of si ...

javascriptphpajax

Is there a way to display the next/previous buttons separately from the scroller in my jQuery thumbnail scroller implementation?

Is there a method to display the next and previous buttons outside of the scroller frame when using jQuery thumbnail scroller by manos.malihu.gr? I have attempted to modify the button class in CSS to make them more prominent or visible, but unfortunately ...

javascriptjquerycssscroll

What could be the reason behind the child component updating without triggering a re-render in Reactjs?

I am encountering an issue with my main component and child chart component. Even though the main component updates the state of the child chart component upon connecting to a websocket, the chart does not redraw as expected. Interestingly, when I click on ...

javascriptreactjschart.jsreact-chartjs

Retrieving information from an ImmutableMultiDict in Flask

I'm currently in the process of learning how to utilize ajax with Flask. My approach involves sending an ajax request and handling the data as a post request within my Python file. The code snippet in my HTML file: var data = {"name":"John Doe","age ...

jquerypythonajaxflask

Bootstrap Tags Input - the tagsinput does not clear values when removed

I am attempting to manually remove the input value from bootstrap-tags-input when the x button is clicked, but the values are not changing in either the array or the inputs. This is the code I have tried: $('input').tagsinput({ allowDuplica ...

javascripthtmljquerybootstrap-tags-input

Issue with pagination functionality post-Ajax request on Rails platform

I am working on implementing pagination using the Kaminari plugin. As I Ajaxify my application, I have run into an issue. I have a form that contains paginated data along with another form used for filtering that data (both work via Ajax). Initially, the p ...

jqueryruby-on-railsajaxkaminari

Exploring tailored markup features in Next.js version 13

I am trying to optimize my website for social media sharing on platforms like WhatsApp. I have been experimenting with different methods to set custom markup in Next.js 13, but haven't achieved the desired outcome yet. Your help and insight are greatl ...

javascriptreactjsnext.jsnext.js13nextjs-image

Creating a dynamic 3D pie chart with Highcharts and JSON data

I am attempting to create a 3D pie chart using HighChart with JSON data. Despite enabling the 3D option, it only displays in 2D. Here is an example of the 3D pie chart I am trying to achieve: Could someone please help me identify what might be missing in ...

javascriptjqueryhighcharts

Adjust the font size of MaterialUI icons using CSS

I am currently facing an issue where I need to increase the size of my icons by 200px, but they are defaulting to 24px which is the standard for all Google Icons. Any suggestions on how to solve this? HTML <div class="col span-1-of-4 box"> <i ...

htmlcssiconsmaterial-ui

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

javascripthtmlreactjs

Using Django's form within a jQuery dialog box

I am faced with a situation where I have a site that uses a main template called base.html, along with additional subpages rendered by separate views. The base.html template includes a menu that, when clicked, displays a jQuery dialog. My goal is to includ ...

jquerypythonajaxdjango

Making jQuery work: Utilizing tag replacements

My current code is: this.html(this.html().replace(/<\/?([i-z]+)[^>]*>/gi, function(match, tag) { return (tag === 'p') ? match : '<p>'; return (tag === '/p') ? match : '</p& ...

javascriptjqueryhtml

Guide to displaying a pop-up modal containing text and an image when clicking on a thumbnail image

Recently delving into Bootstrap 3, I created a thumbnail grid showcasing images related to various projects. My goal is to have a modal window pop up when clicking on an image. Within the modal, I want to display the selected image alongside some descrip ...

javascriptjqueryhtmltwitter-bootstrap-3

A reliable cross-browser solution for CSS sticky positioning

I designed a layout with 1 header and 3 vertical panels. The challenge is to ensure that all the panels can expand or contract horizontally to fill up 100% of the page width collectively, while also taking up 100% of the vertical space below the header (wh ...

cssflexboxcss-positionsticky

Is there an easy method to compare the CSS styles of a specific section in HTML?

Currently, I am facing an issue where the size of a specific area on my asp.net page changes after a post-back. It seems that the style applied to this area is being altered for some reason. This situation has raised the question in my mind - is there a m ...

asp.nethtmlcssdomstylesheet

Populate an HTML table with the days of the month and corresponding dates retrieved from a PostgreSQL database using JavaScript

I'm struggling to figure out how to use generate_series to populate an HTML table where the 'key' of <tr> corresponds to the days of the selected month and year using an <input type='month'>. So far, with the help I re ...

javascriptreactjspostgresqlaxios

Creating a function to manipulate an element on a different webpage

Upon clicking a button on Page1, a function is triggered which then calls another function to generate HTML and append it to a div with the #lista id. The issue here is that #lista belongs to Page2, so I am unsure if there is a syntax similar to ajax where ...

javascriptjquery

NodeJS produces identical outcomes for distinct requests

RESOLVED THANKS TO @Patrick Evans I am currently working on a personal web project and could use some assistance. In my website, users are prompted to upload a photo of their face. When the user clicks the "upload" button, the photo is sent with a request ...

javascriptnode.jsapiexpressunirest