Dropdowns featuring checkboxes in multiple instances

Does anyone have a solution for adding multiple multi-select dropdowns on one page? I have created a dropdown with checkboxes, but I need to replicate this functionality across many dropdowns. Any suggestions on how to modify the code?

If you want to see the code in action, check out this CodePen link. Below is the HTML/CSS/jQuery code snippet used in the CodePen example:

Insert modified JavaScript code here...
Insert modified CSS code here...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div>
    Insert modified HTML code here...
</div>
jqueryhtmlcss

Answer №1

When it comes to markup and styles

  • Avoid using labels like 
    <label>Hello world</label>
    without referencing a FormActionElement
  • Ensure both the checkbox and label text are wrapped in a <label> for clickability
  • Utilize CSS classes like .is-active and .is-hidden to define states
  • Use a ::before pseudo-element with content: for arrows, and manage arrow state with .is-active applied to a dropdown component
  • If using multiple checkboxes for the same purpose, give them a name attribute like name="states[]" to capture all selected values in a states Array
  • Store preview names in data-* attributes like data-name="Long name"
  • Opt for CSS flex over floats
  • Always position a parent element (e.g., relative) if you plan on making a child element absolute

Regarding JavaScript implementation

  • Create a function that handles custom dropdowns by using jQuery's .each(), such as 
    $dropdown.each(UI_dropdown); // Apply logic to all dropdowns
  • In this function, always refer to a child element within the dropdown as part of this to avoid targeting every single instance in the DOM
  • Add an event handler to document to close active dropdowns
  • Also ensure to close one dropdown when another is opened:

[...]

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

Modify the active class and change the input value when the button is clicked

I am working on a functionality where I have two buttons with hidden inputs. Upon clicking the buttons, I want them to become active by changing their background color and adding the 'active' class to them. Additionally, I need to update the valu ...

jquerybuttononclick

Is the "sticky footer" in CSS causing issues with the percentage height of nested divs?

My "main-section" div is designed to inherit its height from the parent div, known as the "wrapper." The wrapper div, in turn, takes its height from the body of the document. Both the HTML and body tags are set with a height of 100%. To implement the ...

cssheightpercentagesticky-footerhtml

A guide to finding elements using Python Selenium

Is there a way to click on an element using selenium and python with the following structure: <a href="#create" class="btn toolbarBtn"> <i class="fa fa-plus-circle"></i> Create </a> After copying the xpath ...

jquerypythonhtmlselenium

CompletePage script, individual automatic scrolling

Having trouble with my fullPage.js implementation. I have a total of 5 sections and I'm trying to set different scrolling behaviors for each section. Specifically, I want Sections 1 through 3 to auto-scroll and Section 4.1 to 4.2 to use normal scroll. ...

javascriptjqueryhtmlscrollfullpage.js

Setting the background using parameters in ReactJS is a powerful technique for customizing

Can someone assist me with setting a background for a div using react js, where I pass the background URL as a parameter? This is the main functionality. function Main (){ return ( <main className="Main"> <List BGimage={" ...

javascriptcssreactjsparameters

Transitioning from Jquery to vanilla JavaScript or transforming Jquery code into pseudo code

Struggling with a snippet of jQuery code here. While I have a good grasp on JavaScript, my knowledge of jQuery is somewhat limited. I am seeking assistance to analyze the following code in order to translate it into plain JavaScript or pseudo code that ca ...

javascriptjquery

Is it possible to assign the value "4" to the same attribute in every object within an array using JavaScript?

How can I add the same item with a value of "4" to each object in an array using JavaScript? For example, consider the following: var arr = [{"num":"111"},{"ttt":"123","rss":"456"},...]; I would like to achieve the following result: arr2 = [{"num":"111 ...

javascriptjqueryarraysangularjs

Using jQuery within an MVC view, you can easily extract a specific value from a JSON array or retrieve a value from a JSON object

Is there a way to extract a specific key from a JSON object? Here is an example of my JSON object: { "stdid": 12345, "stdAcntBal": "26.5", "stdAcntBalDue": "770.75", "TAmount": 0, "sTatus": "welcome" } How can I retrieve the studnumb ...

javascriptjqueryasp.netajaxasp.net-mvc

Switch the image source when hovering over a text menu

Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image. onmouseover="this.src='Images/img.png'" onmouseout="this.src=' ...

javascriptjqueryhtmlcssimage

jQuery - Incorrect folder path for image replacement

I have a specific request to change the image paths in multiple .html pages, redirecting them from the default folder to another folder. After implementing code from an external javascript file successfully, I am encountering an error where the HTML sou ...

javascriptjquery

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

Ways to display two horizontal scrolling menu bars

I am in need of displaying two horizontal scroll menu bars on my website. After some research, I came across a custom horizontal scroll menu with left and right arrows. https://jsfiddle.net/c5grnve6/ While it works well with only one scroll menu on the p ...

javascriptjqueryhtml

Angular: Image files could not be loaded due to a 404 error (Not Found)

After downloading this free theme, I tried to use it in my Angular project within WebStorm. However, I encountered this error message: Failed to load resource: the server responded with a status of 404 (Not Found) and despite having the correct path, ...

htmlcssjsonbootstrap-4

Using rvest to extract picture data

I've been grappling with this issue for a few weeks now and haven't had any success. My ultimate goal is to extract each image from the website provided (link:). To start, I am attempting to retrieve just one instance of the image stored in the & ...

htmlcssrrvest

Creating code to ensure a div element is displayed only after a specific duration has elapsed

Can anyone help me with coding to make a div appear on a website after a specific amount of time? Here's an example of what I'm trying to achieve: <div class="container"> <div class="secretpopout"> This is the hidden div that should ...

javascriptjqueryhtml

Navigating through various folders to access files in HTML

I am facing an issue with my folder structure and includes in my PHP files: index.php includes/header.php includes/conn.php contents/ad_list.php contents/ad_posting.php In my index.php, I successfully included includes/header.php. However, in contents/a ...

phphtml

Find and delete any <div> elements with a specific class if they are present following the parent <div>

If the <span> element with class add is clicked in the scenario below, how can I verify and delete any <div> elements with classes such as edit, flag,delete that come after the parent <div>? I need to clear out these <div> elements ...

jquery

Targeting an outer div based on checkbox status: a comprehensive guide

How can I target a div when a user checks a checkbox? Any advice on how to select an outer div when the checkbox is checked? ...

htmlcsscheckbox

Using JQuery to apply a CSS class or check for a CSS class on multiple button elements that

Being new to Jquery and Javascript, I am facing challenges in understanding how to implement the following. Throughout my site, I use the same button class, and I am attempting to make Jquery apply a "clicked" class only to the button that was clicked, no ...

jquerycssbuttonaddclass

Node.js - Error: Undefined:0 SyntaxEncountered an unexpected end of input syntax error

Exploring Node.js and Backbone.js for the first time. Using the book "Backbone Blueprints" but encountering issues with the provided code to set up the webserver. Node.js is installed and running fine. Here's the package.json code: { "name": "simp ...

javascriptjqueryjsonnode.jsbackbone.js