Expanding nested lists with JavaScript

Posted on 2012-09-13
Last Modified: 2012-09-13
I am working on a web page where is need to hide and reveal text in stages. Conceptually, the page would look something like this.

MainTopic 1
Subtopic 1.1
Subtopic 1.2
Subtopic 1.3
Subtopic 1.4

Full Description 1.4
MainTopic 2
MainTopic 3
MainTopic 4

Initially, all the user would see is the list of 4 main topics. Click on a main topic and a list of subtopics appears directly beneath the main topic. Click on any subtopic and a full description, usually 5 to 10 lines of text, appears beneath the subtopic.

Using innerHTML in Javascript, I have no problem creating the first level of expansion – getting to the subtopics. The problems start with trying to get the full descriptions to pop up. It appears to require nested functions, and I cannot get them to work together.

Is there a solution to this issue? A little code example would be a great help.
Question by:gpinzino
    LVL 50

    Expert Comment

    by:Julian Hansen
    This is an example of what you might be looking for. Might need tweaking depnding on whether you want only one panel to show at a time - i.e. if open panels must close when new panel / subitem selected
    LVL 1

    Author Comment

    Thanks for the quick response. This certainly looks good. Yes, I would need it to open only one panel at a time. How would I modify the code to do that?
    LVL 50

    Accepted Solution

    A few small changes

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now