Надеюсь, это решение поможет вам.
var obj = {
"firstitem": "name",
"second item": {
"description": "descriptioncontent",
"briefdescription": {
"age": "content1",
"job": "content2",
"objective": "content3"
}
}
};
var obj2 = {
"name": "Christy",
"descriptioncontent": "hi hello",
"content1": "content 1 description",
"content2": "content 2 description",
"content3": "content 3 description"
};
function loadContent(){
console.clear();
var ul = document.createElement('ul');
ul = createNode(obj,ul);
document.querySelector("nav").appendChild(ul);
}
function createNode(ob,ul){
Object.keys(ob).forEach(function(value,index,objectPassed){
var li = document.createElement('li');
if(typeof ob[value] === 'string'){
var a = document.createElement('a');
a.href= "#";
var aText = document.createTextNode(value);
a.appendChild(aText);
li.appendChild(a);
li.addEventListener("click", function(){
document.querySelector("section").innerHTML = obj2[ob[value]];
});
}else{
var label = document.createElement('label');
var rand = Math.random();
var span = document.createElement('span');
label.htmlFor = rand;
label.appendChild(span);
var spanText = document.createTextNode(value);
span.appendChild(spanText);
li.appendChild(label);
var input = document.createElement('input');
input.setAttribute("type", "checkbox")
input.setAttribute("hidden", true);
input.id = rand;
li.appendChild(input);
var newUl = document.createElement('ul');
newUl = createNode(ob[value],newUl);
newUl.className = "sub-group-list";
li.appendChild(newUl);
}
ul.appendChild(li);
})
return ul;
}
loadContent();body {
margin-top: 2rem;
font: 100% "Open sans", "Trebuchet MS", sans-serif;
}
a {
text-decoration: none;
}
ul,li{ list-style-type:none; margin:0px}
.wrapper {
position: absolute;
top: 10%;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-50 {
float: left;
width: 50%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.col-100{
float: left;
width: 100%;
margin-top: 6px;
}
/**
* Hidden fallback
*/
[hidden] {
display: none;
visibility: hidden;
}
/**
* Styling top level items
*/
.nav a,
.nav label {
display: block;
padding: .85rem;
color: #fff;
background-color: #151515;
box-shadow: inset 0 -1px #1d1d1d;
transition: all .25s ease-in;
}
.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
color: rgba(255, 255, 255, 0.5);
background: #030303;
}
.nav label {
cursor: pointer;
}
/**
* Styling first level lists items
*/
.group-list a,
.group-list label {
padding-left: 2rem;
background: #252525;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover,
.group-list label:focus,
.group-list label:hover {
background: #131313;
}
/**
* Styling second level list items
*/
.sub-group-list a,
.sub-group-list label {
padding-left: 4rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
}
.sub-group-list a:focus, .sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
background: #232323;
}
/**
* Styling third level list items
*/
.sub-sub-group-list a,
.sub-sub-group-list label {
padding-left: 6rem;
background: #454545;
box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
background: #333333;
}
/**
* Hide nested lists
*/
.group-list,
.sub-group-list,
.sub-sub-group-list {
height: 100%;
display: none;
transition: max-height .5s ease-in-out;
}
nav input[type=checkbox]:checked + ul {
/* reset the height when checkbox is checked */
display:block;
}
/**
* Rotating chevron icon
*/
label > span {
transition: -webkit-transform .65s ease;
transition: transform .65s ease;
transition: transform .65s ease, -webkit-transform .65s ease;
}
.nav__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
section{
border:1px solid #ccc; padding:10px 15px;
}<div class="wrapper">
<div class="row">
<div class="col-50">
<nav class="nav" role="navigation">
</nav>
</div>
<div class="col-50">
<section>
</section>
</div>
</div>
</div>