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.

Answers


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.

HTML:

<div id="bookshelf1">
  <ul>
  </ul>
</div>

<div id="bookshelf2">
   <p></p>
</div>

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() {
   addBooks();
   addBooksToDOM();

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

JSFiddle demonstrating a full example:

https://jsfiddle.net/bg5dLxb8/

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Post Status

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

Search




Leave an answer