Create a function in JavaScript to add a toggle feature to a dropdown

I am working with multiple dropdown lists all having the common element role="list". My goal is to create a toggle functionality so that when one dropdown is clicked, it automatically closes any other open dropdowns.

<div id="dropdownList1" class="jqx-listbox jqx-reset jqx-rc-all jqx-widget" aria-multiselectable="false" role="list"></div>

<div id="dropdownList2" class="jqx-listbox jqx-reset jqx-rc-all jqx-widget" aria-multiselectable="false" role="list"></div>

<div id="dropdownList3" class="jqx-listbox jqx-reset jqx-rc-all jqx-widget" aria-multiselectable="false" role="list" ></div>
javascript

Answer №1

take a look at this method: include onclick="closeOthers(this)" in all dropdown items and use the following function:

function closeOthers(selected_dd){
    $.each($('.jqx-listbox[role="List"]'),function(i,v){
        $(v).removeClass('open');//close all
    });
    $(selected_dd).addClass('open'); //this is how you select the item you want to open
}

note that I created the open class myself... feel free to use any other approach!

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

Creating a Route in Angular 2 for a Component other than the one initialized with the bootstrap function

I am currently in the process of working on a project involving Angular2. If you are interested in understanding why I need to do what I am about to explain, please take a look at this issue. The main component in my project is called AppComponent and it ...

javascriptroutestypescriptangular

Is It Best to Override Behavior in a Directive?

Having two directives that display lists of documents, one for user-favorited documents and the other for user-pinned documents. The criteria for displaying these documents depend on the values of "pinned" and "favorite" within each document object: docum ...

javascriptangularjs

How to extract keys with the highest values in a JavaScript hashmap or object

Here is an example for you to consider: inventory = {'Apple':2, 'Orange' :1 , 'Mango' : 2} In this inventory, both Apple and Mango have the maximum quantity. How can I create a function that returns both Apple and Mango as t ...

javascriptobjectkeyreduce

Error in Displaying Vuetify Child Router View

I am currently working on integrating a child router-view to be displayed alongside surrounding components. Here is an overview of my routing setup: { path: "/login", name: "TheLoginView", component: TheLoginView, }, { path: "/dashboa ...

javascriptvue.jsvuexvuetify.js

Having trouble reading the file using jQuery in Internet Explorer 8 and earlier versions due to its non-XML format (albeit resembling XML)

Currently, I am utilizing AJAX to load a KML file (which essentially functions as an XML file). The parsing works seamlessly in IE9, FF, and other browsers, but encounters issues in IE8. Although the data is retrieved, I face difficulties parsing it in jQu ...

javascriptjqueryxmlajaxkml

Establishing express routing results in API call returning 404 error indicating resource not found

I need some clarification on how to configure my Express routing using app.use and router. My understanding is that I can create a router and then attach it to a route using app.use() to handle all routing related to that route. Can someone assist me in ...

javascriptapiexpressroutes

Creating an entity using various asynchronous sources in node.js/express.js

Struggling to find a solution to my problem online and hoping someone here can help. My express route is making multiple API requests for different JSON objects, but I'm having trouble building a single JSON response for the client side view. All my a ...

javascriptjsonnode.jsasynchronousexpress

Trouble with formatting a HTML form

I have been working on dynamically creating HTML forms using a function called makeInput(). However, I am facing an issue where the text input boxes are appearing next to each other when I click the "Add Course" button, instead of one per line. Below is ...

javascripthtml

Basic $http.get request including parameters

I've been attempting to send an HTTP request using the AngularJS $http service like this: $http.get('http://myserver:8080/login?', { params: {username: "John", password: "Doe" }, headers: {'Authorization': ...

javascriptangularjs

Discovering the Cookie in Angular 2 after it's Been Created

My setup includes two Components and one Service: Components: 1: LoginComponent 2: HeaderComponent (Shared) Service: 1: authentication.service Within the LoginComponent, I utilize the authentication.service for authentication. Upon successful authent ...

javascriptangulartypescriptcookies

Send data from the URL to PHP and then to Javascript in order to showcase the value within an input field

I need to pre-fill an email subscriber form with an email address from the URL. The specific email address is included in the following URL: http://www.domain.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcacbdbbb9e3b9b ...

phpjavascriptwordpressparameter-passing

vue implementing autoscroll for long lists

I am looking to implement an autoscrolling log feature on my webpage that is dynamically fetched from a REST endpoint. To handle the potentially large size of this log, I decided to use vue-virtual-scroll-list. Additionally, I wanted the log to automatical ...

javascriptvue.jsvuejs2

Unleash the Power of Animating Your Active Tabs

Is there a way to create animated tabs that slide in when clicked? I've experimented with using transition code but haven't quite achieved the desired effect yet. This is what I currently have: [data-tab-info] { display: non ...

javascripthtmlcss

What are some React component libraries compatible with Next.js 13.1?

I'm exploring Next.js and experimenting with version 13.1 and the new app directory. Is it feasible to accomplish this without sacrificing the advantages of server controls? An error message I encountered states: You're attempting to import a c ...

javascriptreactjsnext.js

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

I have been successfully using the TableDnD plugin for drag and drop functionality on table rows. However, I am now facing an issue with dynamically generated tables via AJAX. The code doesn't seem to work as expected when it comes to drag and droppin ...

javascriptjqueryajaxdrag-and-droptablednd

Navigating the Terrain of Mapping and Filtering in Reactjs

carModel: [ {_id : A, title : 2012}, {_id : B, title : 2014} ], car: [{ color :'red', carModel : B //mongoose.Schema.ObjectId }, { color ...

javascriptnode.jsreactjs

Can you please guide me on how I can implement a top AJAX menu like the one on StackOverflow

Have you seen the menu that appears when you first visit a website, with an 'x' on the right to close it? I believe this is done through AJAX - what specific terms should I look up to implement this feature? ...

javascriptajax

Encountered a problem while parsing an XML file using JavaScript from an external server

Currently, I am developing an iPhone application in HTML that needs to pull content from an XML file stored on a remote server and display it in a list. I have successfully accomplished this task when the XML file is hosted on the same server using the fo ...

javascriptxmlxmlhttprequest

Custom attribute in ReactJS component - I am not defined in my custom attribute in React component

I am currently working with ReactJS and I am facing an issue regarding accessing a custom attribute -name- of my ReactJS component. Despite trying to use e.target.name, it keeps returning "undefined" on my console. I cannot seem to figure out why this is ...

javascriptreactjs

Restricting the frequency at which a specific key value is allowed to appear in JSON documents

Within my JSON file, there is an array structured like this: { "commands": [ { "user": "Rusty", "user_id": "83738373", "command_name": "TestCommand", "command_reply": "TestReply" } ] } I have a requirement to restrict the num ...

javascriptarraysjsonkey-valuekey-value-coding