Expand the list in both vertical and horizontal directions

I have a unique way I want this list to function:

  • When clicked, it should reveal a vertical list.
  • If an item in the vertical list is clicked, it should display horizontally with more information about that item.
  • All items should be hidden until either Test 1-4 or one of the submenus Test 1.1 - 1.5 is clicked.

Here's how I styled it with CSS & HTML:

<style>
    #navcontainer
    {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
        border-top: 1px solid #999;
        z-index: 1;
    }

    #navcontainer ul
    {
        list-style-type: none;
        text-align: center;
        margin-top: -8px;
        padding: 0;
        position: relative;
        z-index: 2;
    }

    #navcontainer li
    {
        display: inline;
        text-align: center;
        margin: 0 5px;
    }

    #navcontainer li a
    {
        padding: 1px 7px;
        color: #666;
        background-color: #fff;
        border: 1px solid #ccc;
        text-decoration: none;
    }

    #navcontainer li a:hover
    {
        color: #000;
        border: 1px solid #666;
        border-top: 2px solid #666;
        border-bottom: 2px solid #666;
    }

    #navcontainer li a#current
    {
        color: #000;
        border: 1px solid #666;
        border-top: 2px solid #666;
        border-bottom: 2px solid #666;
    }
</style>

<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#" id="current">Test1</a></li>
        <li><a href="#">Test2</a></li>
        <li><a href="#">Test3</a></li>
        <li><a href="#">Test4</a></li>
    </ul>
</div>

I've attempted to use jQuery and "TextShower" without success (I only know basic HTML).

Below is an image illustrating my concept, hoping someone can help me make it work as intended.

jqueryhtmlcsslistfold

Answer №1

To differentiate between different Tests and Test Versions, you can assign a CSS Class to each one.

/* Initially hidden */
.vertical_nav {
    display:none;
}

/* Display when active */
.current {
    display:block;
}

With multiple vertical menus, all with the class vertical_nav, they will initially be hidden.

<ul class="vertical_nav" data-test="1"></ul>
<ul class="vertical_nav" data-test="2"></ul>
<ul class="vertical_nav" data-test="3"></ul>

In addition to the vertical menus, there are links in the horizontal menu as well:

<a href="#" class="test" data-test="1">Test 1</a>
<a href="#" class="test" data-test="2">Test 2</a>
<a href="#" class="test" data-test="3">Test 3</a>

We have also assigned the data-test attribute to help identify each test.

The concept is to select data-test=1 if the link with data-test=1 is clicked.

Use jQuery (or vanilla JavaScript) to interact with the vertical nav:

$("a.test").click(function() {
    var testNumber = $(this).data("data-test");
    $(".vertical_nav").removeClass("current");
    $(".vertical_nav[data-test=" + testNumber + "]").addClass("current");
});

This same approach can be applied to the content block in the middle.

I've created a demo on JSFiddle: http://jsfiddle.net/87ypG/

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 breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...

jqueryhtmlcssajaxbootstrap-4

Utilize MaterialUI's stepper component to jazz up your design with

Is there a way to customize the color of a material ui Stepper? By default, the material UI stepper's icons use the primary color for both "active" and "completed" steps. class HorizontalLinearStepper extends React.Component { state = { activeS ...

javascriptcssreactjsmaterial-ui

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

javascriptjqueryhtmlangularjsfunction

Retrieve all HTML components with LXML

I have a large div element in my HTML document that I need to parse in order to retrieve all of its HTML content as well as any nested tags. Here is the code I am currently using: innerTree = fromstring(str(response.text)) print("The tags within the speci ...

pythonhtmlparsinglxml

Javascript: Comparing Equality of two Objects/ Arrays

Consider two objects with the same property: var obj1 = {name: 'John'}, obj2 = {name: 'John'}; Result: obj1 == obj2; and obj1 === obj2; both return false The same holds true for arrays: var arr1 = [1, 2, 3], arr2 = [1, ...

javascriptjquery

Input field for postal code containing only numbers (maximum 5 digits) in Angular version 4/5

I am struggling with creating an input field that accepts numbers. If I use type="text", I can only type 5 characters of alphanumeric data, but if I use type="number", it allows any number input without limiting it to just 5 numbers. Thank you in advance f ...

javascripthtmlangular

Transfer the file image stored in a MySQL database to an excel spreadsheet

Having an issue with capturing image data input from a PHP and HTML database to Excel. I am trying to display the images in a specific size within an Excel file. Below is the PHP code used to create the table: <?php header("Content-type: application/o ...

phpjavascriptmysqlhtmlexcel

Give the inner container the ability to expand to fill the remaining space

After formatting my HTML code as shown below: https://i.sstatic.net/oaVVg.png The blue rectangle takes up 70% of the outer container's width, while the green rectangle occupies the remaining 30%. My goal is to have the blue rectangle expand to fill ...

htmlcss

Steps for eliminating a column from a table

By including the detailPanel option, a new column with an icon button will be automatically added. https://i.sstatic.net/RoNue.png Is there a way to eliminate this additional column that is generated? Appreciate your help! ...

cssmaterial-uimaterial-table

The use of backticks within an HTML document for nesting purposes is not permitted

Currently, I am utilizing nodemailer to send HTML template code in Node.js. However, the issue I am encountering is that I cannot nest backticks within it: Here's my code snippet: let mailDetails={ from: 'example@example.com', to: & ...

javascripthtmlnode.jsnodemailertemplate-literals

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Looking to add a unique touch to my React project with a shadow effect resembling an arch shape at the top of an image using Tailwind CSS. The ultimate goal is to create a semi-transparent arch-shaped shadow covering the top portion of the image, similar t ...

cssreactjsnext.jstailwind-css

Is it possible to store an HTML element tag in a variable?

I've been learning JavaScript on w3schools and freecodecamp, but I stumbled upon something in w3schools that has me puzzled. Can someone please explain why this particular code snippet works? The variable "text" is declared as containing the string " ...

javascripthtml

Quickest method for comparing two lists against each other

If I need to determine whether a string value from list1 is present in list2, what would be the most efficient approach? Here is an example of Pseudo Code: StringList List1 = {"a", "b", "c", "d"}; StringList List2 = {"d", "c", "b", "a"}; foreach (string ...

c#arrayslistarraylist

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

javascriptjquerycssparallax

Trouble opening attached html file with Asp.net and Google Charts integration

I am facing an issue with my Asp.Net page that includes a grid and an image. The image is a Google Charts chart with a URL of approximately 1600 characters. To send this content as an email attachment, I created an .htm file containing the grid and the ima ...

asp.nethtmlgoogle-visualization

Maintain position:relative while adding child elements to the div

I am currently working on creating a div that includes a small circle on the right side with an X inside it. Here is my progress so far: https://i.sstatic.net/3r2Nl.png Although the X is not yet placed inside the circle as intended, overall it looks good ...

htmlcss

Trouble with displaying autocomplete options for ajax requests

I recently implemented the autocomplete feature using bootstrap typeahead in my project. The original code snippet worked flawlessly: $(function () { var $input = $(".typeahead"); $input.typeahead({ source: [ {id: "someId1", name: "Display nam ...

jqueryajaxtwitter-bootstraptypeahead.jsbootstrap-typeahead

Is it possible to store multiple keys in HTML local storage?

Is there a way to store multiple keys to local storage without overwriting the previous ones when multiple people take a survey and refresh? Could they be grouped by userID or sorted in any way? $('form').submit(function() { $('input, ...

javascriptjqueryhtmllocal-storage

Obtain all elements of the body except for the div element through a Selenium python query

I need help fetching all body elements in a query without including div elements. Below is the code I have so far: body = driver.find_element(By.TAG_NAME, 'body') elements = body.find_elements(By.TAG_NAME, '*') However, this code retr ...

pythonhtmlselenium

Executing PHP code upon user click and transmitting variables

After receiving an answer from a previous question, I am using the code below: <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript> function doSomething() { $.get("somepage.php"); return fal ...

phpjavascriptjqueryajax