var arr = new Array();
arr[0] = "One";
arr[1] = "Two";
arr[2] = "Three";
arr[3] = "Four";
arr[4] = "Five";
arr[5] = "Six";
arr[6] = "Seven";
arr[7] = "Eight";
arr[8] = "Nine";
arr[9] = "Ten";
arr[10] = "Eleven";
arr[11] = "Twelve";

 var lastClicked = 0;
 var isOpen = false;
 
 function showAnswer(heading) {
 
    var h = document.getElementById("Story" + heading);
    var img = document.getElementById("img" + heading);
    var imgon = document.getElementById("imgOn" + heading);
    // resets all the display styles = "none"
   // 

    if (isOpen && lastClicked == heading)
        {
        
            isOpen = false;
            resetStyles();
        }
    else if(isOpen &&lastClicked !=heading)
        { 
        
    var h2 = document.getElementById("Story" + lastClicked);
    var img2 = document.getElementById("img" + lastClicked);
    var imgon2 = document.getElementById("imgOn" + lastClicked);
            isOpen=true;
            lastClicked=heading;
        h.style.display="block";
        document.getElementById('sidegreyss').style.height = "854px";
        img.style.display="none";
        imgon.style.display="block";
         h2.style.display="none";
        img2.style.display="block";
        imgon2.style.display="none";
        }
    else
        {
        h.style.display="block";
        img.style.display="none";
        imgon.style.display="block";
        document.getElementById('sidegreyss').style.height = "854px";
        lastClicked=heading;
        isOpen=true;
        }


   
//    if (h.style.display =="block" )
//    {
//        h.style.display="none";
//        img.style.display="block";
//        imgon.style.display="none";
//        
//    }
//    else
//    {
//     
//        
//    
//    }
//    
  } 
 
 function resetStyles() {
    for(var i = 0; i < arr.length; i++) {
        var imgs = document.getElementById('Story'+ arr[i]);
        var img = document.getElementById('img' + arr[i]);
        var imgon = document.getElementById('imgOn' + arr[i]);
//alert('imgOn' + arr[i]);
 imgs.style.display = "none";
//        
document.getElementById('sidegreyss').style.height = "572px";
        img.style.display = "block";
      imgon.style.display = "none";
    }
    
    
  
 }