Interactive CSS animation with a single click

I am in the process of developing a website and have incorporated CSS animations for dropdowns. However, I am looking to change it so that the dropdowns appear on click rather than hover in the submenu. I am struggling to make this adjustment with the current code. Please excuse the presence of PHP code as I directly copied it from the source. You can view the code I am working with here.

  $( "#horiz-menu ul li > ul" ).click(function()

Although my knowledge of jQuery is limited, this is what I have managed to come up with so far.

javascriptjqueryhtmlcssdrop-down-menu

Answer №1

If you want to achieve this effect with jQuery, you can use the following code:

jQuery

$( "#horiz-menu a" ).click(function(e){
   $(this).next('ul').toggleClass('active');
});

CSS

#horiz-menu ul.active {
   opacity: 1;
   visibility: visible;
   margin: 0;
 }

Here's an example on JSFiddle:

https://jsfiddle.net/hw9fsLb2/1/

Answer №2

Give this a shot:

$( "#horizontal-menu ul li > ul" ).on("click", function(){
$( "#horizontal-menu li" ).toggle( "slow" );
});

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

What is the best way to interrupt an animation and restart it?

On my webpage, I have implemented some anchors and links that navigate to these anchors. When I click on a link, the background-color of the anchor changes. I use animation to gradually fade out this color over 10 seconds - starting with white and then rem ...

javascriptjqueryanimation

Using React with Axios to trigger several requests with a single action

Let's say a user selects a team from a dropdown menu, triggering a request to an API endpoint. const selectHomeTeamStat = evt => { const { value } = evt.target; getStats(leagueId, value, 'home'); }; In this hypothetical scen ...

javascriptreactjspromisegetaxios

Using CakePHP and Jquery to toggle form visibility

My goal is to switch between two forms on button click using jQuery. The condition is that if FORM1 is visible, then hide FORM2, and vice versa. These two forms should never be displayed together. I am implementing this within a CakePHP framework. Form1 C ...

jqueryhtmlcakephpshow-hide

Fixing the issue of list styles not displaying properly when using CSS3 columns in Webkit can be achieved by

example here: http://jsfiddle.net/R7GUZ/3/ I'm struggling to make the list-style property work in webkit for a parent OL that is styled with -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; Is there a way to format an ordered list ...

htmlcsshtml-listsmultiple-columns

Guide to comparing the contents of two text fields and highlighting the altered characters using ReactJS

Is there a way to compare the contents of two Material-UI textfields and identify the characters that have changed in both? I came across a similar question, but it was specifically for ReactJS rather than C# Windows Forms: How can you highlight the chara ...

javascriptreactjsmaterial-uicompare

Utilize MaterialUI's Shadows Type by importing it into your project

In our project, we're using Typescript which is quite particular about the use of any. There's a line of code that goes like this: const shadowArray: any = Array(25).fill('none') which I think was taken from StackOverflow. Everything s ...

javascriptreactjstypescriptnpmmaterial-ui

Troubleshooting problem with Ajax Calendar Extender

I have a text box where I need to save the chosen date from a calendar. To achieve this, I am using an AJAX calendar extender and setting the target control property to the textbox ID. However, when I click on a button on the same page, I lose the selected ...

javascriptasp.net.netajaxajaxcontroltoolkit

Is there a way to alter the color of a button once it has been clicked?

For a school project, I am working on coding a website to earn extra credit. My goal is to create a fancy design that stands out. One of the main things I am trying to achieve is having a button change color when it is clicked, similar to how it highlight ...

javascripthtml

What sets these async method declarations apart?

What goes on behind the scenes? const facade = { // A: doSomething: async () => await delegatedFunction(), // B: doSomething: async () => delegatedFunction(), // C: doSomething: () => delegatedFunction(), // D: do ...

javascriptasync-await

What is the best way to make a Firestore request that relies on the initial Firebase response in Next.js?

Is there a way to perform a second cloud Firestore query using the uid obtained in the first query, without the second query executing before receiving the response from the first one? Here's my code: var {data} = useSWR('/api/report', fet ...

javascriptfirebasenext.js

Determine the vertical scrolling and the width of the window in a specific function

I need assistance with displaying a div based on the window width. The requirement is for the div to show when the window width is 1350px or wider. However, if the window is narrower than 1350px, the following rules apply: 1) The div should be hidden if t ...

javascriptjqueryhtml

Chrome and Firefox provide excellent compatibility for running JavaScript, whereas Safari may encounter some issues. Opera's performance with JavaScript can be quirky

Disclaimer: I'm new to web design and development. I have encountered an issue with posting information from a form built on CodeIgniter using jQuery. The form posts successfully in Chrome and Firefox, with the current page automatically reloading. H ...

javascriptjqueryformscodeignitercross-browser

Tips for adjusting the dimensions of material table within a react application

Could someone please provide guidance on adjusting the size of a table made with material table? I am currently working in React and the following code is not yielding the desired outcome. I even attempted to use 'react-virtualized-auto-sizer' wi ...

javascriptcssreactjsrxjsmaterial-table

Utilize Require.js to Load Dropzone.js Library

I am interested in integrating Dropzone.js into an application that is built using Backbone and Require.JS. However, I am unsure of the correct implementation process. Should I utilize require()? What is the most effective way to handle this integration? ...

javascriptrequirejsdropzone.js

Encountering difficulties transmitting JSON data to the server via JavaScript

Trying to send JSON data to a server method. The method successfully works when passing a simple 'test' string, but encounters issues with the following: function SendToServer() { $.ajax({ type: "POST", url: "Default.aspx/Sa ...

jqueryajaxjson

Extracting data from properties within a Vue.js local component

Within my Vue Instance, I have two local components that receive props from the data of the Vue Instance. However, when attempting to access the values of these props in one of the local components, they appear as undefined. The code snippet is as follows ...

javascriptvue.jsvue-component

What is the reason behind external JavaScript files being able to access the functions of other external JavaScript files, and what measures can

While I may not be an expert in JavaScript, I find it intriguing that within a project containing 3 JavaScript files, any of these files can access functions from the others. The real puzzle lies in figuring out how to prevent this from happening. For in ...

javascript

Is it possible to prevent the late method from running during the execution of Promise.race()?

The following code snippet serves as a simple example. function pause(duration) { return new Promise(function (resolve) { setTimeout(resolve, duration); }).then((e) => { console.log(`Pause for ${duration}ms.`); return dur ...

javascriptnode.js

Causing a click event to occur results in crashing the browser

Take a look at this link: example on jsfiddle Why does the click event keep triggering multiple times when a div is clicked, eventually causing the browser to crash? What could be causing this issue and how can it be resolved? The actual div contains a l ...

javascriptjquery

Utilizing repl.it for a database in Discord.js

I've created a database script on repl.it and it seems to be functioning properly. However, I keep encountering null values in the users' database. Here's my code snippet: client.on("message", async (message) => { if (messag ...

javascriptnode.jsdatabasediscorddiscord.js