<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" />
    <title>Nineteen Eighty Sick: Year of the Lupus</title>
</head>
<body>
    <h1>Nineteen Eighty Sick: Year of the Lupus &#8629;</h1>
    <h2>1986.1.1</h2>

<!-- Header -->
    <div class="header" id="myHeader">
        <button class="btn active" onclick="four()">Overview</button>
        <button class="btn" onclick="one()">100%</button>
      
    </div>

<!-- metadata dropdown -->

    <div id="rightnav" class="rightnav">
      <a href="index.html" id="title">Title</a>
      <a href="#" id="view">View</a>
    </div>

    <div id="leftnav" class="leftnav">
      <a href="#" id="date">Date</a>
      <a href="https://www.google.com/" id="creator">Creator</a>
    </div>

    <div class="metadata_Creator"><a href>Manuel Pamaran, Paki A. Lamero</a>    
    </div>

   <button class="orgbtn" onclick="myFunction()">Organizations</button>

   <div class="square"></div>
    <div id="myDIV">
    <ul><a href="index.html">Kabataang Makabayan - Patriotic Youth (KM)</a></ul>
    <ul><a href="index.html">Civilian Home Defense Force (CHDF)</a></ul>
    </div>

<div class="row"> 
  <div class="column">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus01.jpg" style="width:100%">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus05.jpg" style="width:100%">
    
  </div>
  <div class="column">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus02.jpg" style="width:100%">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus06.jpg" style="width:100%">
    
  </div>  
  <div class="column">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus03.jpg" style="width:100%">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus07.jpg" style="width:100%">
    
  </div>
  <div class="column">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus04.jpg" style="width:100%">
    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus08.jpg" style="width:100%">
  
  </div>
</div>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a loop variable
var i;

// Four images side by side
function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "25%";  // IE10
    elements[i].style.flex = "25%";
  }
}

// Full-width images
function one() {
    for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "80%";  // IE10
    elements[i].style.flex = "80%";
  }
}

// // Two images side by side
// function two() {
//   for (i = 0; i < elements.length; i++) {
//     elements[i].style.msFlex = "50%";  // IE10
//     elements[i].style.flex = "50%";
//   }
// }

// Add active class to the current button (highlight it)
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

// toggle text
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}



</script>

</body>
</html>