Toggling JSON Elements through javascript in HTML

Question

My goal is to toggle the "prev" and "ext" elements i got from the JSON File in this way:

Here's JS Fiddle

The menu bar looks like:

[ "prev_Person1" "Person1" "ext_Person1" ... "Person2" ... "Person3" ... ]

I set prev_Person1 and ext_Person1 to be not visible at first. I am trying it with the jquery function at the end of the javascript code.

When i click on the "Go Back"-Button the object "prev_Person1" should be shown, in this case it is the name Jeanette.

When i click on the "Go Forward"-Button the object "ext_Person1" should be shown, in this case it is the name Angela.

The bar should now look like

[Jeanette Angie Angela ... ]

And i wanted to save the changes to the local storage, so that when i navigate to other pages it doesn't go back to its first state.

<div class="scrollmenu" id="myHeader">
    <a style="float:left" href="index.html">Menu</a>    
</div>
<button id="prev"> Go Back </button>
<button id="ext"> Go Forward </button> 

CSS:

 body 
 {
   margin: 0;
   font-family: Arial;
 }
 .top-container 
 {
 background-color: #f1f1f1;
 padding: 2px;
 text-align: center;
 }
 div.scrollmenu {
 background-color: #0000A0;
 overflow: auto;
 white-space: nowrap;
 }

div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}

div.scrollmenu a:hover {
background-color: #777;
}

Javascript

data = 
{
"persons": [{
    "id": "1",
    "name": "Angie",
    "link": "*",
    "prev": [ { "id" : "6",
                "name" : "Jeanette"}],
    "ext": [ { "id" : "4",
               "name" : "Angela"}]    
},    
{
    "id": "2",
    "name": "Rana",
    "link": "Rana.html",
    "prev": [ { "id" : "7",
                 "name" :"Angelika"}],
    "ext": [ { "id" : "5",
                 "name" :"Mona"}]    
},
{
    "id": "3",
    "name": "Tamara",
    "link": "Tamara.html",
    "prev": [ { "id" : "4",
                 "name" : "Angela"}],
    "ext": [ { "id" : "8",
                 "name" :"Tala"}]             
}
]}

var id;
var name;
var link;
var prev;
var ext;

for (var key in data) {
for (var i = 0; i < data[key].length; i++) {
    id_persons = data[key][i].id;
    name = data[key][i].name;
    ext = data[key][i].ext;
    prev = data[key][i].prev;
    link = data[key][i].link;

// just like add the add all the actors     
for (var j = 0; j < ext.length; j++) {
    var ext_person = ext[j].name;
    var id_ext = ext[j].id;

    }
for (var p = 0; p < prev.length; p++) {
    var prev_person = prev[p].name;
    var id_prev = prev[p].id;
}
    // ---------------------------------------------------------------------
    // menu_bar_knows is for the prev elements //
    var menu_bar_prev = document.createElement('a');
    menu_bar_prev.id = id_prev;

    menu_bar_prev.innerHTML =
    prev_person + '</a>';
    // End of menu_bar_knows elements // 
    // ---------------------------------------------------------------------

    // ---------------------------------------------------------------------
    // menu_bar is for the main path elements //
    var menu_bar = document.createElement('a');
    menu_bar.className = 'menu_bar';
    menu_bar.id = id_persons;
    menu_bar.href = link;

    menu_bar.innerHTML =
    name + '</a>';
    // End of menu_bar elements // 
    // ---------------------------------------------------------------------
    // ---------------------------------------------------------------------
    // menu_bar_knows is for the ext elements //
    var menu_bar_ext = document.createElement('a');
    menu_bar_ext.id = id_ext;

    menu_bar_ext.innerHTML =
    ext_person + '</a>';
    // End of menu_bar_knows elements // 
    // ---------------------------------------------------------------------
    // ---------------------------------------------------------------------
    // Calling the elements in the header
    document.getElementById('myHeader').appendChild(menu_bar_prev);
    document.getElementById('myHeader').appendChild(menu_bar);
    document.getElementById('myHeader').appendChild(menu_bar_ext);
    // End 
    // ---------------------------------------------------------------------   
 }
}
//-------------------------------------------//

$(document).ready(function(){

    $(function(angie) {
        var isVisible;
        $("#4, #6").toggle(false);

        if (localStorage.getItem('prev_angie_visible') != null) {
            isVisible = localStorage.getItem('prev_angie_visible') === 
            'false' ? false : true;
        $("#6").toggle(isVisible);
        }

        if (localStorage.getItem('ext_angie_visible') != null) {
            isVisible = localStorage.getItem('ext_angie_visible') === 
            'false' ? false : true;
        $("#4").toggle(isVisible);
        }

    $("#prev_angie").click(function(){
        $("#6").toggle();
        localStorage.setItem('prev_angie_visible', $("#6").is(":visible"));
    });

    $("#ext_angie").click(function(){
        $("#4").toggle();
        localStorage.setItem('ext_angie_visible', $("#4").is(":visible"));
    });
  });
 })

I would be very thankful for every tip or solution!!

Answer 1

You should call the elements in Javascript and set the elements that you need to hidden, and on click you toggle the elements that you want, and then save to local storage:)