Having trouble getting the drop down menu to function properly using HTML and CSS

I attempted to implement a drop-down menu using the following codes. However, I am facing some issues as clicking on the drop-down menu does not open the sub-menus as expected.

Is there a way for me to resolve this problem?

<div id="control-panel" class="col-xs-10 col-xs-offset-1 row">
    <div id="time-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Any Time
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any Time</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Week</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Month</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Year</a></li>
      </ul>
    </div>

    <div id="num-results-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        10 Results
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">10 Results</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">20 Results</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">30 Results</a></li>
      </ul>
    </div>

    <div id="tld-dropdown" class="dropdown col-xs-3">
      <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Any TLD
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any TLD</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.edu</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.gov</a></li>
      </ul>
    </div>
</div>
htmlcss

Answer №1

When using Bootstrap version 3 & 4, the code above functions perfectly without any modifications.

To adapt it for Bootstrap version 5, simply switch the data-toggle attribute to data-bs-toggle, and it will operate as intended.

data-bs-toggle="dropdown"

Below is the updated code for Bootstrap version 5:

<div id="control-panel" class="col-xs-10 col-xs-offset-1 row">
  <div id="time-dropdown" class="dropdown col-xs-3">
    <a class="btn dropdown-toggle" id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="true">
      Any Time
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any Time</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Week</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Month</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Past Year</a></li>
    </ul>
  </div>

  <div id="num-results-dropdown" class="dropdown col-xs-3">
    <a class="dropdown-toggle" id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="true">
      10 Results
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">10 Results</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">20 Results</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">30 Results</a></li>
    </ul>
  </div>

  <div id="tld-dropdown" class="dropdown col-xs-3">
    <a class="dropdown-toggle" id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="true">
      Any TLD
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Any TLD</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.edu</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">.gov</a></li>
    </ul>
  </div>
</div>

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

Displaying or hiding table columns in Vue.js Element-UI el-table based on screen width: a step-by-step guide

Here is my code snippet for generating a table: <el-table :data="tableData" empty-text="No data to display :( " v-if="window.width > 855"> <el-table-column v-for="column in tableColumnsMd" :key=&q ...

htmlcssvue.jsvue-component

image in the background following the header

Live Example: http://jsbin.com/opokev/54 I am currently trying to set this image as the background image while also including a header, but as you can see in the demo, the header is overlapping the image. Is there a way I can rearrange this so that the h ...

htmlcssbackground-image

The scroll functionality does not seem to be functioning as intended on mobile devices when

Hey there, I'm currently working on making my navbar sticky and applying it when the page is scrolled. The code I have works flawlessly on desktop, but unfortunately, it doesn't seem to work on the mobile version. Any suggestions? window.addE ...

javascripthtmlcss

Choose Selectize.js to auto-populate inputs

I am currently using selectize.js for my project: $("#abc").selectize({ valueField: 'name', labelField: 'name', searchField: ['name'], plugins: ['remove_button'], createOnBlur: true, ...

javascriptjqueryhtmlselectize.js

Is it possible to apply a PNG icon collection using CSS?

Throughout various examples, jQuery plugins, and CSS-styled HTMLElements, I have observed the setting of icons on an image with multiple options. I am eager to implement this practice in my own apps. https://i.sstatic.net/WDCH3.png For instance, in the ...

jqueryhtmlcss

Tips for maintaining the aspect ratio of an image while ensuring it always occupies 100% width and automatically adjusts its height

I've searched everywhere but can't seem to find the right CSS solution for my problem. How can I ensure that an image always fills 100% of the height and width of the screen while maintaining its aspect ratio? .myimage { object-fit: cover; widt ...

csstwitter-bootstrapbootstrap-5

Arranging Boxes side by side

I am struggling to align three boxes horizontally on my website, as they are currently stacking vertically. I have implemented Twitter Boostrap's 'row' class in an attempt to achieve this layout. HTML: .img-box-kai { width: 300px ...

htmlcsstwitter-bootstrap

Utilize a function within styled-components

I am looking to dynamically adjust the font size of a button based on the length of a passed-in prop. However, I can't use a dynamic width due to a custom animation applied to the component. Here is my current code: const checkLength = () => { i ...

cssreactjsstyled-components

Decrease the gap between the ticks on a horizontal bar chart in ChartJS

Currently, I am utilizing the horizontal bar chart feature from chartjs and encountering an issue with the chart appearing too large. In addition, there is a notable gap between the ticks on the xAxis (as shown in the attached image). Does anyone know how ...

javascripthtmlcssangularjschart.js

Steps for performing a 'back' action within a div element using jQuery

Within my HTML, I have a div element containing a link. When the user clicks this link, I use AJAX to load new content into the div area. This new content includes a 'back' link that, when clicked, should revert back to the previous content. Cur ...

jqueryhtmlajax

How to Stop Browser Tooltip from Displaying HTML Tags within "innerHtml" in Angular 6

In my Angular application, a template is using the following code snippet: ... <span [innerHtml]="textVar"></span> ... The textVar variable is created to allow for special styling on certain characters or strings. It's formatted using th ...

javascripthtmlangulartypescript

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

javascripthtmlcssangularjs

PHP function array_sum returns the sum of all values in an array rather than displaying each number

I have a collection of unique "coupons" with corresponding "productid"s https://i.stack.imgur.com/IgtFN.png My goal is to transform this list into an array using: $claimed = array($rowOrder['productid']); The problem arises when I attempt to ...

phphtmlmysqlpdo

Tips for altering the scrolling rate of a container

I am trying to adjust the scroll speed of specific divs among a group of 5 divs. I came across a solution that changes the scroll speed for the entire document: http://jsfiddle.net/36dp03ur/ However, what I really need is a scenario like this: <div i ...

javascriptjqueryhtmlcss

Enhancing the window.print() Functionality

I recently utilized the window.print() function to print a web page containing a table. The headers of the table were styled with font color, however when printed, they appeared black instead. Below is the code snippet: <thead> <tr style="color:r ...

htmlprintinghtml-table

Overflow and contain a flex item within another flex item

I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child). Here's the CodePen link for refere ...

htmlcssvue.jsflexboxvuetify.js

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

javascriptcsshtml

Tips on merging HTML node lists from various `getElement`s

Is there a way to combine HTML elements and extract values using array methods? I am struggling to merge them as a nodeList. I tried using get elements and array.unshift to consolidate elements into one variable. var elemsLabel = document.querySelecto ...

javascripthtmlarraysgoogle-apps-scriptweb-applications

Clear out the classes of the other children within the identical parent division

I'm currently in the process of replacing my radio circles with div elements. I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div. However, I'm facing trou ...

htmljquerycssradio-button

What is the best way to divide my HTML page in half?

My goal is to display two maps side by side, one on the right and the other on the left. However, when I try to implement this, one map appears on top of the other. I believe that CSS positioning can help me achieve the desired layout, but as a beginner in ...

javascripthtmlcssgoogle-maps-api-2