Switch the dropdown menu to a button if it consists of only one option

I have been using a database within the Moodle Learning Management System that generates a bootstrap table.

Here is an example of what it looks like: https://i.sstatic.net/UJc4M.png

The last row in the table contains a dropdown menu. When viewing your own entry, you have the options to view, edit, or delete the entry (three values to select from):

https://i.sstatic.net/PG6Ui.png

If you are looking at entries from other users, you can only view them (only one value to select from), so the dropdown menu is not necessary:

https://i.sstatic.net/MvYYz.png

How can I change the dropdown menu for entries from other users to a button while keeping the dropdown menu for my own entries?

The button should display "Mehr" and simply be a link to the "view.php" page. I am limited to using CSS or JavaScript but I am not proficient in JS. I can assign the dropdown menu its class, but this applies to all dropdown menus.

This is the code for two dropdown menus (#1 for own entry and #2 for another user's entry):

<div class="dropdown" id="yui_3_17_2_1_1676893448131_33"><button class="btn btn-outline-primary dropdown-toggle"
        type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">Mehr</button>
    <div class="dropdown-menu" style="will-change: transform;">
        <div class="dropdown-item"><a href="https://[...]/mod/data/view.php?d=53&amp;rid=1974"><i
                    class="icon fa fa-search-plus fa-fw " title="Einzelansicht" role="img"
                    aria-label="Einzelansicht"></i></a></div>
        <div class="dropdown-item"><a
                href="https://[...]/mod/data/edit.php?d=53&amp;rid=1974&amp;sesskey=QmOlQH4lg5"><i
                    class="icon fa fa-cog fa-fw " title="Bearbeiten" role="img" aria-label="Bearbeiten"></i></a></div>
        <div class="dropdown-item"></div>
        <div class="dropdown-divider"></div>
        <div class="dropdown-item"><a
                href="https://[...]/mod/data/view.php?d=53&amp;delete=1974&amp;sesskey=QmOlQH4lg5"><i
                    class="icon fa fa-trash fa-fw " title="Löschen" role="img" aria-label="Löschen"></i></a></div>
    </div>
</div>

<div class="dropdown"><button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mehr</button>
    <div class="dropdown-menu">
        <div class="dropdown-item"><a href="https://[...]/mod/data/view.php?d=53&amp;rid=1973"><i
                    class="icon fa fa-search-plus fa-fw " title="Einzelansicht" role="img"
                    aria-label="Einzelansicht"></i></a></div>
        <div class="dropdown-item"></div>
        <div class="dropdown-item"></div>
        <div class="dropdown-divider"></div>
        <div class="dropdown-item"></div>
    </div>
</div>

I am seeking JavaScript assistance to achieve something similar to this: If the dropdown menu only contains one dropdown item, then switch the dropdown menu to a button with the content of the href link and an aria label of "View."

<button type="button" class="btn btn-outline-primary">Mehr</button>
<a class="btn btn-primary" href="https://[...]/mod/data/view.php?d=53&amp;rid=1973" role="button">Link</a>

Can anyone provide guidance on how to implement this?

javascripthtmlcsstwitter-bootstrap

Answer №1

To personalize the elements inside a dropdown and detect their quantity, you can utilize JavaScript.

Simply include the following script in your code:

let dropdowns = document.querySelectorAll('.dropdown-menu'); // Select all drop down menus

// Iterate through each drop down menu
dropdowns.forEach(function(dropdown) {
  
  let numItems = dropdown.length; // Number of items in the drop down
  
  // Check if there is only one item
  if (numItems === 1) {

    // Create a new button element
    let button = document.createElement('button');
    button.innerText = 'Mehr'; // Set button text
    button.setAttribute('aria-label', 'Einzelansicht'); // Add aria-label attribute
    button.setAttribute('href', dropdown.querySelector('a').href); // Set href attribute
    dropdown.parentNode.replaceChild(button, dropdown);

  }
});

If the dropdown contains only one item, a button will be rendered with the specified attributes. Otherwise, the dropdown will remain unchanged.

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

How can I break down an object with hyphenated key names?

Attempting to perform object destructuring on the following: { name: "Bryan", last-name: "Enid" } However, trying to destructure it like this is not successful: const {name, last-name} = req.body Is there an alternative method to destructure this ...

javascriptjson

Website form phone number verification server

I am currently working on developing a website form where users can input their information, including their phone number. I am looking for a simple way to verify the user's phone number using PHP without the need for installation of SDKs or complex c ...

phphtmlwebsmsverification

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Upon receiving output in html string format from services, I am presented with the following: "<html>↵<h1>↵Example : ↵<br>Explanation↵</h1>↵<hr>↵<b>key1 : ABCD <br>key2 : 2016-10-18-18-38-29<br> ...

javascriptjqueryhtmltext

The fixed left div and scrollable right div are experiencing issues with their alignment

I am having an issue with a section where the left div is fixed and the right div is scrollable. However, the content of the right div scrolls even before the scroll top reaches the section. My goal is for the right div to scroll only when it reaches the t ...

javascripthtmljquerycssflexbox

Remove the source code upon accessing the inspector tool

I recently encountered a page with encrypted source code. The content is being loaded from two separate sources stored in JavaScript files. My question is: Is it feasible to completely remove the HTML source code when a user opens the inspector (F12, etc ...

htmldomblocksource-code-protection

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. ...

javascriptjqueryhtmlcssangularjs

Create a request for an update by utilizing Axios within a React and Material UI environment

I am completely new to React, and my experience with CRUD functionality is limited to ASP.NET MVC. I'm feeling a bit lost as none of the tutorials I've come across seem to cater to my specific situation. The tips I received previously were helpfu ...

javascriptreactjsaxiosmaterial-ui

The functionality of jQuery Revolution Slider becomes compromised when integrated with ember.js

Initially, the jQuery Revolution Slider on the website functions properly. However, when navigating to a different route and returning to the home/index page where the slider is located, it malfunctions. <script type='text/x-handlebars' data- ...

jqueryhtmlember.jsrevolution-slider

Similar to tabpanel's ._hide() function, how can this be implemented in C#?

Even though I feel like I've tackled this issue in the past, I can't seem to locate a resolution anywhere... In my situation, there are 3 tabs within an ajax TabContainer and two CheckBoxes located outside of it. All 3 tabs are visible unless bo ...

javascriptajaxtabpanel

Transfer text from one form to a text field on a different website

I've created a form that allows users to input numbers in a field and then directs the page to a specific URL. Here's the code snippet: <html> <head> <meta charset="utf-8"> <title>Tracking</title> </head& ...

javascripthtmltextfield

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

cssjavafxfontsitalic

Merge a pair of observables to create a single combined output

Hey there, I'm currently diving into the world of RxJS and reactive programming. One challenge I'm facing is merging two observables. The first observable contains an array of objects called DefectImages[], while the second observable holds an ar ...

javascriptangularrxjsreactive-programming

Load pages using ajax with conditional if statements

I am currently developing a website that relies on ajax to load its inner pages. However, I need certain groups of pages to have background and container width changes as well. Is there a way for me to use conditional if statements to modify the class or ...

jqueryhtml

JavaScript code is failing to render data properly within HTML documents

I am facing an issue while trying to display data extracted from JSON in HTML. Despite my efforts, the data is not showing up on the webpage. I am unsure about what might be causing this error. Any assistance in resolving this matter would be greatly appre ...

javascripthtml

Importing modules using relative paths results in failure due to module not being found, whereas employing absolute paths

I have been encountering this problem for a considerable amount of time and have made multiple attempts to resolve it. I am currently working on the development of my discord.js bot and recently switched from TS back to JS due to certain complications I fa ...

javascriptnode.jsdiscord.js

Transforming a pandas dataframe into an interactive HTML table, emphasizing particular data points

I need help with converting pandas data frames to HTML and highlighting specific elements. My task involves creating two pandas dataframes, rendering them to HTML, and comparing their elements: import pandas as pd import webbrowser data1 = [1, 2, 3, 4, ...

pythonhtmlpandas

Finding the closest button using Selenium in Python

I am attempting to click on the "Delete Comment" button once I have identified a comment that contains the specific hashtag, husky, which is a clickable link. Since there are multiple "Delete Comment" buttons on the page, my approach is to locate the comm ...

pythonhtmlseleniumweb-scrapingautomation

Locate and extract the JSON object using the specified key-value pair

Trying to extract a specific object from a complex json file, noting the key, and then returning a new json poses a challenge. I am using expressjs as the backend for this task. Sample.json '[{"ServID":"Rai 1","Parametri" ...

javascriptnode.jsjsonexpress

Protractor Encounters Error When Assigning Variable

var itemStatus = element(by.model('item.statusId')).getText(); This issue is causing Protractor to raise an error: Uncaught exception: Error while waiting for Protractor to sync with the page: "Angular could not be found on the window" Pro ...

javascriptangularjsseleniumselenium-webdriverprotractor

Modifying data within a pre-set framework

Let's take a look at a basic setup for the task at hand: In the HTML Side test.html <div id="app"> <my-comp temp="1" cat="{ name:'Geoff', age:3 }"></my-comp> </div> Transitioning to the Vue Side app.js: impo ...

htmlvue.js