Home Ask Login Register

Developers Planet

Your answer is one click away!

Henk February 2016

Creating clickable multidimensional list

I am trying to use javascript or a "better solution" to create 2 lists that are linked to each other like a multiple array. The lists will be strings. Here is an example:

Bookshelf One: Book1, Book2, Book3 ..... Bookshelf Two: Book4, Book5, Book6 .....

The first list of 'Bookshelfs' will be in a left sided Div box and each time I CLICK on a bookshelf I want to display the list inside that shelf.

How do I create this list and how do I display it?

Thanks in advance.


Darren Davies February 2016

You have not provided any sample code, I would recommend this next time you ask a question.

As a starting point you need to represent the bookshelves in the markup using HTML elements such as divs and lists.


<div id="bookshelf1">

<div id="bookshelf2">

You would then need to keep track of the bookshelf structure, I have used an object literal and a single dimensional array (You will have to modify this yourself so I am not doing all of the work for you).

JavaScript / jQuery:

var bookshelves = {};
bookshelves.bookshelf1 = [];
bookshelves.bookshelf2 = [];

function addBooks() {
   bookshelves.bookshelf1.push("Book 1");
   bookshelves.bookshelf1.push("Book 2");
   bookshelves.bookshelf1.push("Book 3");
   bookshelves.bookshelf2.push("Book 4");
   bookshelves.bookshelf2.push("Book 5");
   bookshelves.bookshelf2.push("Book 6");

function addBooksToDOM() {
   $(bookshelves.bookshelf1).each(function(i,v) {
      $("#bookshelf1 ul").append("<li data-index=" + i + ">" + v + "</li>");

$(document).ready(function() {

   $("#bookshelf1 ul li").on("click", function() {
      var index = $(this).data("index");
      $("#bookshelf2 p").text(bookshelves.bookshelf2[index]);

JSFiddle demonstrating a full example:


Read the following to see how you can create a two dimensional array to store nested bookshelves:


Post Status

Asked in February 2016
Viewed 2,083 times
Voted 14
Answered 1 times


Leave an answer

Quote of the day: live life