Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Hey there! I am looking to create a unique HTML hierarchy drop-down menu. It will have multiple levels or options, with each option having the potential for child nodes. When an option has child nodes, an arrow will appear next to it. Clicking on this arrow will hide all other options and display the child nodes. Each option will also have arrows on the left and right side. Clicking on the left arrow will hide the current options and show the parent level, while clicking on the right arrow will reveal the next level. While researching, I came across tree drop-down lists, but my manager prefers something different. If anyone has any ideas or links regarding this type of drop-down menu, please share them with me. Thank you!

javascriptjqueryhtmlcss

Answer №1

http://jsfiddle.net/1jwyauLy/

<ul class="level1">
    <li> <span> &rarr; Option 1</span>

        <ul class="level2">
            <li> <span class="lar">&larr;</span> Option 1.1</li>
            <li> <span class="lar">&larr;</span> Option 1.2</li>
            <li> <span class="lar">&larr;</span> Option 1.3</li>
        </ul>
    </li>
    <li> <span>  &rarr; Option 2</span>

        <ul class="level2">
            <li> <span class="lar">&larr;</span> Option 2.1</li>
            <li> <span class="lar">&larr;</span> Option 2.2</li>
            <li> <span class="lar">&larr;</span> Option 2.3</li>
        </ul>
    </li>
    <li><span>  &rarr; Option 3</span>

        <ul class="level2">
            <li> <span class="lar">&larr;</span> Option 3.1</li>
            <li> <span class="lar">&larr;</span> Option 3.2</li>
            <li> <span class="lar">&larr;</span> Option 3.3</li>
        </ul>
    </li>
</ul>



$(".level2").hide();

$(".level1>li").on("click", function () {
    $(this).find(".level2").show();
    $(this).find(">span").hide();
    $(".level1>li").not(this).hide();
})

$(".lar").on("click", function () {
    $(".level1>li").show();
    $(".level2").hide();
    $(this).closest(".level2").prev("span").show();
    return false;
})



ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

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

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...

javascriptcssreactjsmaterial-ui

Looking for a checkbox change event that can detect and respond to changes in the checked state made programmatically

(jQuery 1.4.4) I am facing an issue with a checkbox where the .change() listener works well when the user manually clicks on the checkbox. However, I also require it to trigger when I programmatically change the status of the checkbox in jQuery using .at ...

jquery

Exploring the possibilities of socket.io-client in combination with Vite.js and Vue for seamless real

I am currently diving into socket.io for my upcoming Vue project, but I seem to be encountering some issues. Interestingly, everything works smoothly when I use vue-cli, however, I prefer working with Vite.js due to its speed and customization options. Unf ...

javascriptvue.jssocket.iovue-clivite

Exploring the properties within a MongoDB document using mapping functionality

I am trying to retrieve data from a document using Node.js and encountering an issue where the map operator is returning data with similar names twice. I am wondering if I can use filter instead of map to address this problem. Here is the code I am using t ...

javascriptnode.jsreactjsarrays

error: "undefined property cannot be read"

I am encountering an issue on our site where a bot is needed to work properly. The error message I am receiving is "cannot read property ´value´ of undefined". I have already set the bind_address to 0.0.0.0, but that did not resolve the issue (I also tri ...

javascriptnode.js

Oops! Could not compile due to a syntax error: Invalid assignment expression on the left-hand side

I am currently developing an application that requires me to retrieve data from the backend containing a userdetail object. In my code, I need to set a current accessToken for the userdetail object: useEffect(() => { if (session?.user && ...

javascriptreactjsnext.js

Leveraging Variables within my .env Configuration

Does anyone have suggestions on how to set variables in my environment files? Website_Base_URL=https://${websiteId}.dev.net/api In the code, I have: websiteId = 55; and I would like to use config.get('Website_Base_URL'); to retrieve the compl ...

javascriptnode.jsenvironment-variables

What is the best way to incorporate variables into a text file using ajax?

I am having an issue with my code. I have written a script that allows users to draw an image on canvas and then extract pixel values from the clicked location, writing them into a text file using ajax. However, I am facing problems with my onclick and a ...

javascriptajaxhtml

Unable to Get Basic jQuery .load Example to Function

Seeking assistance with a jQuery issue regarding loading HTML snippets into a page. When the snippet contains just HTML, it loads fine. However, when it includes a script, there seems to be an issue. Simplified code provided below for better understandin ...

javascriptjquery

Having some trouble finding the input box element with Python/Selenium

I'm struggling to automate a task using Python. For some reason, I can't find the email input element with driver.find_element_by_. No matter what I try, I just can't seem to locate it. All I want is for Python to log in using Chromedriver. ...

pythonhtmlselenium

What steps can I take to transform this jquery code into a react.js equivalent?

Can someone help me convert this jQuery code into ReactJS? I've been trying, but encountering a lot of errors. I'm new to jQuery and having trouble understanding it. In simple terms, this is how the code works: When I click on the text "Laptop, ...

jqueryreactjsreact-hooks

The 'Component' you are trying to use cannot be rendered as a JSX component in Next.js

Take a look at the code in _app.tsx: function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} /> } An error is popping up during the project build process: Type error: 'Component' cannot be used as a JSX comp ...

javascriptreactjstypescriptnext.js

Heroku-specific issue prevents Accordion Collapsible from functioning properly due to CSP restrictions

I'm encountering a strange issue. I've implemented some nested collapsible and simple collapsible sections that work perfectly fine on my localhost, but for some reason they don't seem to be working on Heroku. Any help would be greatly appre ...

jqueryexpressbootstrap-4content-security-policyhelmet.js

Express and Firebase Function: Headers cannot be set once they have already been sent

My experience has been mainly with the Hapi framework for developing RESTful APIs. However, for my current project, I decided to use Express and I'm encountering some confusion regarding the issues that are arising. While testing the POST endpoint us ...

javascriptfirebaseexpress

Tips on adjusting the label on a datetime-local button

While using mobile browsers, I noticed that the datetime local feature includes three buttons. One of these buttons is called the Set button, but I would like to change its name to Ok. Is there a way to do this? I tried looking for solutions but couldn&apo ...

javascripthtml

Tips for showing only the date (excluding time) from a get operation in javascript (specifically using node js and mysql)

I recently built a CRUD application using Node.js and MySQL. However, I am facing an issue where I am unable to display the date without the time and in the correct format. { "id": 1, "name": "Rick Sanchez", "dob": & ...

javascriptmysqlnode.jsexpress

Verify if the SaveAs dialog box is displayed

Can javascript/jquery be used to detect the appearance of a SaveAs dialogue box? I need to know if it's displayed in order to remove a loading gif. Any ideas? ...

javascriptjqueryasp.net-mvcmodel-view-controller

Building Unique Staircases with Three.js Geometry

I have been working on creating a custom three.js geometry for round staircases, but I seem to have made some errors with the vertices and indexes of the steps. Below is an example staircase that utilizes my custom geometry: https://i.sstatic.net/uQXvP.j ...

javascriptthree.js

Is there a problem with css3 opacity transition in Webkit browsers?

While exploring alternative ways to modify the Bootstrap 3 carousel, I stumbled upon a technique that achieves a 'fade' effect instead of the usual 'slide'. However, in webkit browsers, the transition may appear choppy or flicker betwee ...

csstwitter-bootstrapcss-transitionsopacity

Utilizing Laravel's pagination feature with the power of AJAX and JSON communication

I currently have four fields that act as filters on my Laravel model. I am utilizing AJAX to fetch response data from the blade template and return it as a JSON response. Below is the function that I am using: public function displayTable() { // These ...

phpjqueryjsonajaxlaravel