Div hide show with back button display at header

Question

Guys I have a problem in div selection. I have to use lot of dives in my code. but at the same time I have back button at header so i want that back button pressed then I move to back div.

here is my java script code.

<script type="text/javascript">
function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.list');
    for (var i = lists.length; i--;) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

</script>

And Here is my html code example.

  <style>
  body{
  }
  #list1 {background-color: coral;}
  #list2 {background-color: #45cd2a;}
  #list3 {background-color: #ab4d2a;}
  </style>
  <form action="????" >
  <button> Go to back div</button>
   </form>
   <a href="#" onclick="toggle_visibility('list1');">List One</a>
   <a href="#" onclick="toggle_visibility('list2');">List Two</a>
   <input type="button" value="List Four" onclick="toggle_visibility('list3');"> 
   </input>

<div id="list1" class="list" style="display:none;">
<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
 <div id="list2" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
 </ul>
 </div>
 <div id="list3" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
</body>
</html>

This code works fine but i don't know how to implement a back button to go back div..?? kindly help me.

If you use jQuery then its easy. use $("#"+current_id).prev("li").show(); — lokeshjain2008, Nov 19 '13 at 08:35
yup i know i am not using jquery..but may be in solution jquery will be use.? and question mark shows what i have to write in place of ???...so — Hafiz Arslan Akbar, Nov 19 '13 at 08:38
If you use jQuery then its easy. use $("#"+current_id).prev("li").show(); if you want you use only javascript then this link will help you to find previous and next siblings http://stackoverflow.com/questions/574904/get-next-previous-element-using-javascript — lokeshjain2008, Nov 19 '13 at 08:41
the following link should help you do this....[link](http://stackoverflow.com/questions/680785/on-window-location-hash-change) — Mahesh Budeti, Nov 19 '13 at 08:41

score 0 · Accepted Answer · answered Nov 19 '13 at 08:51

Try this :

Html :

<body>

  <button onclick="back()"> Go to back div</button>  
  <form action="????" >

   </form>
   <a href="#" onclick="toggle_visibility('list1');">List One</a>
   <a href="#" onclick="toggle_visibility('list2');">List Two</a>
   <input type="button" value="List Four" onclick="toggle_visibility('list3');"> 
   </input>

<div id="list1" class="list" style="display:none;">
<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
 <div id="list2" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
 </ul>
 </div>
 <div id="list3" class="list" style="display:none;">
 <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
</div>
</body>

jS:

var divHistory=new Array();
function back(){

    if(divHistory.length>0){
        var id=divHistory.pop();
        var curId=document.getElementById(id);
        curId.style.display = 'none';
        alert(id);;
        if(divHistory.length>0){
            id=divHistory.pop();
            var prevId=document.getElementById(id);
            prevId.style.display = 'block';         
        }       
    }
}
function toggle_visibility(id) {

    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
    hideAllBut(id);
    divHistory.push(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.list');
    for (var i = lists.length; i--;) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

Thanks..this is very helpful...http://jsfiddle.net/WC7V8/ here is fiddle result for someone else. — Hafiz Arslan Akbar, Nov 19 '13 at 16:40

Div hide show with back button display at header

1 Answers1