Convert the menu items into a multi-select using Bootstrap 4

Referencing the example provided in the Bootstrap documentation at http://getbootstrap.com/docs/4.0/components/dropdowns/#menu-dividers

I am interested in creating a custom toggle effect for the menu items, where clicking on an item changes its color to blue, and clicking again reverts it back to its original state. This is meant to mimic a multiselect feature without using checkboxes or the default multiselect.

Is there a way to achieve this through CSS modifications alone?

I am also open to alternative suggestions for implementing a more user-friendly multiselect option, especially for mobile devices (excluding external libraries).

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

While I could provide a JavaScript-only solution, incorporating jQuery in your Bootstrap project can simplify things.

Using JQuery for Bootstrap

Bootstrap comes with a predefined 'active' class which you can utilize along with .dropdown-item (adjust if your classes have different names).

$(".dropdown-item").click(function() {
   $(this).toggleClass("active");
});

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 make a span's background color stretch to 100% width?

Is there a way to make the background of a span element stretch to the full width of its parent container? Just to Clarify I understand that using divs is an option, but it feels more like a workaround than a genuine solution to the issue. (di ...

htmlcss

How can jQuery be used to target a specific class based on its inner value?

For instance, within a div of the same class, there are 6 "p" tags - some containing 'member' text and others not. I aim to use jQuery to select all "p" tags with 'member' as their inner text and apply an additional class to them. Here ...

javascriptjquerycss

Provide the email address to use on the forum

Is there a way to code an email address in HTML that will be invisible and undetectable by forums? Thank you in advance. I'm looking for a more advanced solution like this one! <h>mariaburkke76</h><h><h><h><h>< ...

javascriptphpcsshtml

Fade in and fade out elements with jQuery using opacity in Internet Explorer

I have encountered an unusual issue in Internet Explorer involving a CSS Overlay used for a lightbox. The problem arises when I apply the fadein and fadeout effects using jQuery - everything seems to work smoothly except in IE. Instead of displaying a smo ...

jqueryhtmlcssinternet-exploreropacity

The alignment of table rows does not match the table header in Internet Explorer

Encountering an issue while using NgTableParams to display a table in IE. The table displays correctly in Chrome, but the alignment of rows is off in IE. Check out the demo here When you open the above link in IE and launch the preview window in a separat ...

htmlcssangularjstwitter-bootstrapngtable

Formatting styles for child components' templates using Angular's parent component CSS styling

Is there a way to override CSS of a child component from the parent using ::ng-deep or another method? In my parent component, I have included a child component like this: ....parent.component... <app-likes></app-likes> .....parent.component.. ...

cssangularparent-childng-deep

Enable automatic scrolling for CSS overflow: scroll feature

I am currently developing a chat application where messages are displayed in a background. I have used CSS to add an overflow scrollbar with the line overflow-y: scroll;. Everything is working properly, but I'm wondering if there is a way to automatic ...

javascripthtmlcssscrollbaroverflow

Change the appearance of a specific div within a collection of div elements using React

I'm currently working on a visualizer for sorting algorithms where there are colorful bars that will animate when a specific sorting algorithm is triggered by clicking the play button. To achieve this, I created an array of div elements representing ...

cssreactjsalgorithm

Utilizing extra CSS for a full-width Wordpress featured image makes for a visually stunning design

Is there a way to customize the CSS of a featured image in Wordpress Version 5.9.2 to appear full width? Currently, the image has a large margin and does not fill the entire width as seen on the page below: I attempted to achieve this by adding code to th ...

phphtmlcsswordpress

Ways to specify distinct css styles according to varying number of elements

I need the Button element to always take up 100% of the container, no matter how many elements are inside. Check out my Fiddle link here: Js Fiddle Link <div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-va ...

htmlcss

The Colorful World of CSS Backgrounds

I've been searching for hours trying to track down the source of this strange greenish background color. I've combed through every single file and it's starting to drive me insane. Any ideas where this color could be coming from? I highly d ...

javascripthtmlcss

Assigning a price to a list of pizza options within a dropdown menu

//The goal is to assign a numerical price to each pizza in the array. We must maintain the structure of the array within the select form. Next, we need to display it in another PHP file, how do we retrieve the values? <fieldset> ...

phphtmlarraysformsselect

Transform an xlsx document into a HTML file using VBscript or batch script

After extensive research, I have come up empty-handed in finding a solution to the issue I am facing. The problem at hand is that I have an Excel file in .xlsx format that needs to be converted to .html on a regular basis throughout the day. Once converte ...

htmlexcelbatch-filevbscriptxlsx

Javascript: struggling with focus loss

Looking for a way to transform a navigation item into a search bar upon clicking, and revert back to its original state when the user clicks elsewhere. The morphing aspect is working correctly but I'm having trouble using 'blur' to trigger t ...

javascripthtmlblur

What is the reason behind the frequent use of !important in style.scss files?

During Bootstrap tutorials, many individuals implementing their own Sass variables in a customized style.scss tend to utilize trailing !important. If you'd like to observe an example of this practice, check out the video starting at 13:45 here: https ...

csstwitter-bootstrapsass

Bottom Div in a Bootstrap 4 Carousel

I'm currently attempting to add a div containing 4 fontawesome icons at the bottom of a bootstrap 4 carousel. However, I am facing an issue where the div is positioned right next to the menu button. My goal is to achieve a layout similar to this: http ...

cssbootstrap-4carousel

Ensure that the nested div maintains its height consistently across all three columns

In my layout, I am trying to achieve uniform height for three columns, each containing the same sections like title and address. Not only do I want the cards to have the same height, but also the nested sections should maintain equal heights. For instance, ...

javascripthtmlcssflexboxcss-grid

Ways to heighten the `RadComboBox` `DropDownHeight` featuring `Templates`

One of the challenges I'm facing involves a RadComboBox setup like this: <telerik:RadComboBox ID="RadComboBoxNames" runat="server" Width="470px" DropDownAutoWidth="Enabled" MaxHeight="363px" Skin="MySkin" EmptyMessage="Select" High ...

cssasp.netvb.nettelerikradcombobox

Preserving line breaks in HTML5 code snippets: Tips and Tricks

In my Default.aspx page, I have the following: <code> $(document).ready(function () { $("#clickThis").click(function () { alert("Hello world!"); }); }); </code> However, it is disp ...

asp.nethtml

Connect radio input's value to object's key within AngularJS

Within my controller, I currently have an object structured as follows: $scope.colors = { green: "Green", yellow: "Yellow", red: "Red" }; I am attempting to dynamically generate radio inputs and then link the input value to the corresponding ...

javascripthtmlangularjs