Fading in elements using JQuery every other click

Currently, I am in the process of developing a Burgermenu that features a simple dropdown menu with no animations.

Recently, I attempted to implement a script that would cause this dropdown menu to fade in upon clicking:

<script>
$('span.nav-button').click(function(){
console.log("information: click!");
$(".burgermenu").fadeIn(500);
});
</script>

However, this has caused an issue where I am unable to close the menu as it tries to fade in every time it is clicked.

Is there anyone who can provide guidance on how I might modify this so that the class only fades in on the second click?

javascriptjqueryhtmlcsstransition

Answer №1

Try out the .toggle() function:

$('span.nav-button').on('click', function(){
    $(".burgermenu").toggle();
});

Simplify your code by using the toggle method

Answer №2

<script>
    $('span.nav-button').click(function (){
        $('ul.burgermenu').toggle(500);$
    })
    $(window).resize(function () {
        if ( $(window).width() > 400 ) {
            $('ul.burgermenu').removeAttr('style');
        }
    })
</script>

Just to add a little twist, I decided to include milliseconds for the toggle effect xD -

Big thanks to whoever helped me out! =D

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

"Comparing the integration of Javascript and CSS within an HTML file versus linking them from an

When it comes to including external javascript and CSS files, is there a noticeable difference compared to including all javascript and CSS files (including jQuery core) directly within the HTML file using <style>...</style> and <script> ...

javascriptjqueryhtmlcss

Sorting objects in Angular using ng-options

I am working with an object that has the following structure: { 3019: 'Javascript', 3046: 'Css' } After that, I display this object in a select element like this: <select ng-model="langChoosed" ng-options="key as val ...

javascriptangularjsng-options

Steps to customize the default thumbnail image of an embedded video that is not from YouTube

I've added a video to an HTML page. Here is the code: <div> <video width="400" controls> <source src="videos/myvideo.mp4" type="video/mp4"> </video> </div> Is there a way to modify the default thumbnail image of ...

htmlvideohtml5-video

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

Currently, I am executing a script inside a Pug template. The script commences by fetching an array of JSON objects from MongoDB. I then stringify the array (data) and proceed to loop through it in order to access each individual JSON object (doc). Subsequ ...

javascriptarraysnode.jsjsonpug

Tips for eliminating the trailing slash from the end of a website article's URL

I've recently delved into learning Gatsby, and I've encountered an issue with the Open Graph tag in my project. The og:image is displaying a different image than the intended thumbnail for the article. Here's an example article - . When try ...

javascriptnode.jsreactjsgatsbygatsby-image

How can I implement a daily-updating timestamp on a website using bootstrap and javascript, particularly for review and blog posts?

I am looking to add a timer and date stamp feature to my website built with Bootstrap, using JavaScript or any other necessary tools. Typically, on platforms like Google or in blog posts, there is a small text under the user's photo and name indicatin ...

javascripthtmlcssbootstrap-4

Exploring the process of declaring an object within a JavaScript ES6 class constructor

How can I access constructor variables inside static methods in a class when the property is declared as 'static' with 'this' and not accessible? export class Reporter { constructor() { this.jsonReports = path.join(process. ...

javascriptecmascript-6es6-class

What are the most efficient methods for implementing a deep level update in a React Redux store?

Currently experimenting with Redux and constructing an application driven by dummy data. Within my application, there exists a component labeled "birdInfo" which holds some state within the Redux store. https://i.sstatic.net/Msdu5.png To update the store ...

javascriptperformancereactjsredux

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

csstwitter-bootstrapresponsive-designadsbanner-ads

How to retrieve a variable or map from an HTTP request in Angular 2+?

In my service, I have the functionality to either store an object for access in other components or request data from a web API and return it in a map. Example of retrieving data from objectService: get(): any { if (this.object == undefined || this.o ...

javascriptangularresttypescript

Styling child elements in Angular using css from its parent element

I have a question: Regarding the structure below <component-parent> <first-child> <second-child> <third-child></third-child> </second-child> </first-child> </component-parent> Now I want t ...

cssangular

Is there a way to upload images using jQuery Ajax with a Grails webservice?

I am trying to upload files to a webservice that is implemented using GRAILS. Normally, I can consume this web service using CURL with the following command: curl -X POST -H "Authorization: 53676c55f8014c5eb84624b49d9c9e74" -H "Content-Type: multipart/for ...

jqueryajaxgrails

Leveraging the socket.io and express modules independently of npm

I am currently developing a project for an embedded Linux system using busybox created with buildroot. I'm intrigued by the idea of utilizing node.js modules such as socket.io and express without needing to depend on the installation or execution of n ...

javascriptlinuxnode.jssocket.ionpm

Change the className of an element in React upon clicking it

I just finished developing a menu bar using ReactJS with some basic routing features. Here is the JSX code for the component: class TopBar extends Component { state = { menus: [{id:0,menu:"Home"}, {id:1,menu:"Contact"}, {id:2,menu:"About"}] } a ...

javascriptreactjs

What is the best way to detect when an option is selected in a Material UI autocomplete component?

Utilizing the autocomplete feature with filterOptions to propose adding a new value: <Autocomplete multiple name="participant-tags" options={people} getOptionLabel={(option) => option.name} renderInput={(param ...

javascriptreactjsautocompletematerial-ui

Ways to transition between divs using clickable buttons

I have a coding challenge where I need to implement two panels. The lower panel consists of three buttons and upon clicking each button, different data should load in the upper panel. For example, when button 1 is clicked, divs 1.1, 1.2, and 1.3 should sl ...

javascriptjqueryhtmlcss

What is the best way to achieve consistent appearance across all browsers and various screen sizes?

I have implemented owl carousel on my website for sliding the container. While the slider functions correctly, I encounter issues when minimizing the screen or viewing it on different monitors or browsers. The problem lies in the fact that the code is not ...

htmlcssresponsive-designowl-carousel

Angular 7 three-dimensional model display technology

Looking for advice on creating a 3D model viewer within an Angular 7 project. Currently using the model-viewer web component in JavaScript with success. How can I replicate this functionality and viewer within my Angular 7 application? ...

javascriptangularthree.jswebgl3d-model

After an ajax call in ASP .NET MVC3 using Razor, jQuery may not function properly

When I perform a post back to obtain a partial view using ajax, I utilize the following code to render the partial view within a div named 'DivSearchGrid'. <script type ="text/javascript" > $('#Retrieve').click(function ( ...

javascriptasp.net-mvc-3jquery

Attempting to transmit a ng-repeat object to a personalized filter function

Objective: The goal is to enable a user to input the name of a course into the search field and view a list of students who are enrolled in that course. Data Models: course (contains course name and code) student (holds a list of courses they are regist ...

javascripthtmlangularjsangularjs-ng-repeat