text: data = [
    {
      "big": "Liz *caritas* Hong",
      "description": "chilling in Statler (#HoteliePride)",
      "ethnicity": "Korean",
      "first_name": "Yuna",
      "hometown": "Rochelle Park, NJ",
      "last_name": "Chung",
      "line_number": 144,
      "little": "n/a",
      "major": "Hotel Administration",
      "nickname": "maru",
      "semester": "Spring 2018",
      "year": 2021
    },
    {
      "big": "Jinnie *oceanic* Kim",
      "description": "watching Bob Ross",
      "ethnicity": "Hong Kong Chinese",
      "first_name": "Jenny",
      "hometown": "Hong Kong",
      "last_name": "Ng Hong Yu",
      "line_number": 150,
      "little": "n/a",
      "major": "Biological Sciences",
      "nickname": "eidetic",
      "semester": "Spring 2018",
      "year": 2021
    },
    {
      "big": "Agnes *Euthymia* Shin",
      "description": "on a couch in the library",
      "ethnicity": "Chinese",
      "first_name": "Grace",
      "hometown": "Shanghai, China",
      "last_name": "Han",
      "line_number": 152,
      "little": "Angelina *Orabelle* Huang",
      "major": "Biology & Society",
      "nickname": "Aesa",
      "semester": "Spring 2018",
      "year": 2021
    },
    {
      "big": "Min Young Erika *luciole* Kim",
      "description": "in the art studio or Johnson Museum",
      "ethnicity": "Korean",
      "first_name": "Ariel Soyon",
      "hometown": "Seoul, Korea",
      "last_name": "Noh",
      "line_number": 153,
      "little": "n/a",
      "major": "Fine Arts",
      "nickname": "MIO",
      "semester": "Spring 2018",
      "year": 2021
    },
    {
      "big": "Tenzin *Ramune* Dolma",
      "description": "in the Kroch Asian Library in Olin",
      "ethnicity": "Tibetan",
      "first_name": "Tenzin Seldoen",
      "hometown": "Ithaca, NY",
      "last_name": "Oshoe",
      "line_number": 154,
      "little": "Angela *kiba* Kou",
      "major": "Nutritional Sciences",
      "nickname": "Corsica",
      "semester": "Fall 2018",
      "year": 2021
    },
    {
      "big": "Jinnie *oceanic* Kim",
      "description": "working until sun rise",
      "ethnicity": "Korean",
      "first_name": "Ever",
      "hometown": "Long Island, NY",
      "last_name": "Chae",
      "line_number": 155,
      "little": "Jing *novaturic* Zhang",
      "major": "Materials Science and Engineering",
      "nickname": "oneiric",
      "semester": "Fall 2018",
      "year": 2021
    },
    {
      "big": "Gloria *Bella Vita* Ren",
      "description": "wearing a baseball cap",
      "ethnicity": "Chinese",
      "first_name": "Jessica",
      "hometown": "Toronto, Canada",
      "last_name": "Zheng",
      "line_number": 157,
      "little": "n/a",
      "major": "AEM",
      "nickname": "Mallow",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Morena *umami* Rong",
      "description": "watching Emilie watch Celina sleep at eHub",
      "ethnicity": "Chinese",
      "first_name": "Ling",
      "hometown": "Staten Island, NY",
      "last_name": "Cao",
      "line_number": 158,
      "little": "n/a",
      "major": "Computer Science",
      "nickname": "unix",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Leia *Lalique* Chung",
      "description": "watching Celina sleep at eHub",
      "ethnicity": "Taiwanese",
      "first_name": "Emilie",
      "hometown": "Jericho, NY",
      "last_name": "Guo",
      "line_number": 159,
      "little": "n/a",
      "major": "Mechanical Engineering",
      "nickname": "Arcturus",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Seldoen *Corsica* Oshoe",
      "description": "enjoying nice weather",
      "ethnicity": "Chinese",
      "first_name": "Angela",
      "hometown": "Ellicott City, MD",
      "last_name": "Kou",
      "line_number": 160,
      "little": "n/a",
      "major": "AEM",
      "nickname": "kiba",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Grace *Aesa* Han",
      "description": "being sick",
      "ethnicity": "Chinese",
      "first_name": "Angelina",
      "hometown": "New York, NY",
      "last_name": "Huang",
      "line_number": 161,
      "little": "n/a",
      "major": "Biomedical Engineering",
      "nickname": "Orabelle",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Katie *Auxiliary* Shum",
      "description": "sleeping at Statler with a smoothie",
      "ethnicity": "Korean",
      "first_name": "Lauren",
      "hometown": "Paramus, NJ",
      "last_name": "Chun",
      "line_number": 162,
      "little": "n/a",
      "major": "Hotel Administration",
      "nickname": "chaleur",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Priscilla *Evangeline* Wong",
      "description": "asking someone to elevate me at eHub",
      "ethnicity": "Chinese",
      "first_name": "Kelly",
      "hometown": "Great Neck, NY",
      "last_name": "Foo",
      "line_number": 163,
      "little": "n/a",
      "major": "Computer Science",
      "nickname": "sappho",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Grace *Symposium* Zhang",
      "description": "counting down the days till the next break",
      "ethnicity": "Chinese",
      "first_name": "Tracy",
      "hometown": "Beijing, China",
      "last_name": "Xu",
      "line_number": 164,
      "little": "n/a",
      "major": "ILR",
      "nickname": "Chasselas",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Jane *eclectic* Park",
      "description": "eating for a very long time at eHub",
      "ethnicity": "Korean",
      "first_name": "Selena",
      "hometown": "Vancouver, Canada",
      "last_name": "Kang",
      "line_number": 165,
      "little": "n/a",
      "major": "ORIE",
      "nickname": "beatific",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Min Young Erika *luciole* Kim",
      "description": "sleeping at eHub",
      "ethnicity": "Korean",
      "first_name": "Celina",
      "hometown": "Bayside, NY",
      "last_name": "Kim",
      "line_number": 166,
      "little": "n/a",
      "major": "Information Science",
      "nickname": "MEI",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Priscilla *Evangeline* Wong",
      "description": "nowhere. I'm a hermit",
      "ethnicity": "Korean",
      "first_name": "Vivien",
      "hometown": "Forest Hills, NY",
      "last_name": "Lee",
      "line_number": 167,
      "little": "Tiffany *claire voie* Chen",
      "major": "ISST",
      "nickname": "clytemnestra",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Kristin *Rectify* Chen",
      "description": "eating ice cream while watching Wizards of Waverly Place",
      "ethnicity": "Chinese",
      "first_name": "Tong",
      "hometown": "Manhattan, NY",
      "last_name": "Li",
      "line_number": 168,
      "little": "n/a",
      "major": "ILR",
      "nickname": "Factor!al",
      "semester": "Spring 2019",
      "year": 2022
    },
    {
      "big": "Bonnie *Rolex* Kim",
      "description": "running to class late and stressed",
      "ethnicity": "Korean",
      "first_name": "Rachel",
      "hometown": "Bayside, NY",
      "last_name": "Kwon",
      "line_number": 169,
      "little": "n/a",
      "major": "Information Science",
      "nickname": "imugi",
      "semester": "Fall 2019",
      "year": 2022
    },
    {
      "big": "Emily *abelha* Chen",
      "description": "in Starbucks or Olin basement studying",
      "ethnicity": "Chinese",
      "first_name": "Jennifer",
      "hometown": "Millburn, NJ",
      "last_name": "Guo",
      "line_number": 171,
      "little": "n/a",
      "major": "Biological Sciences",
      "nickname": "mellis",
      "semester": "Fall 2019",
      "year": 2022
    },
    {
      "big": "Yein Lillian *Nikka* Lee",
      "description": "napping after class",
      "ethnicity": "Korean",
      "first_name": "Brittany",
      "hometown": "Seoul, Korea",
      "last_name": "Lee",
      "line_number": 172,
      "little": "n/a",
      "major": "PAM",
      "nickname": "Blue Moon",
      "semester": "Fall 2019",
      "year": 2022
    },
    {
      "big": "Ever *oneiric* Chae",
      "description": "wearing one airpod",
      "ethnicity": "Chinese",
      "first_name": "Jing",
      "hometown": "Manhattan, NY",
      "last_name": "Zhang",
      "line_number": 173,
      "little": "n/a",
      "major": "ORIE",
      "nickname": "novaturic",
      "semester": "Fall 2019",
      "year": 2022
    },
    {
      "big": "Michelle *léda* Huang",
      "description": "napping in one of the independent study rooms in Mann",
      "ethnicity": "Chinese",
      "first_name": "Willa",
      "hometown": "Brooklyn, NY",
      "last_name": "Chen",
      "line_number": 174,
      "little": "n/a",
      "major": "AEM",
      "nickname": "blanc",
      "semester": "Fall 2019",
      "year": 2021
    },
    {
      "big": "Stephanie *petrichor* Yang",
      "description": "in Olin basement or Kroch :)",
      "ethnicity": "Chinese",
      "first_name": "Stephanie",
      "hometown": "Hong Kong",
      "last_name": "Yang",
      "line_number": 175,
      "little": "n/a",
      "major": "ILR",
      "nickname": "petrichor",
      "semester": "Fall 2019",
      "year": 2022
    },
    {
      "big": "Yanis *Querencia* Park",
      "description": "napping in a library",
      "ethnicity": "Chinese",
      "first_name": "Michelle",
      "hometown": "St. Louis, MO",
      "last_name": "Li",
      "line_number": 176,
      "little": "n/a",
      "major": "PAM",
      "nickname": "Iolite",
      "semester": "Fall 2019",
      "year": 2022
    },
    {
      "big": "Cara *Inoxia* Huang",
      "description": "deciding if I should buy coffee",
      "ethnicity": "Taiwanese",
      "first_name": "Amanda",
      "hometown": "Basking Ridge, NJ",
      "last_name": "Wang",
      "line_number": 177,
      "little": "n/a",
      "major": "Computer Science",
      "nickname": "Indica",
      "semester": "Fall 2019",
      "year": 2022
    },
    {
      "big": "Jasmine *MIU* Ng",
      "description": "snacking, with an iced latte in my other hand",
      "ethnicity": "Taiwanese/Cantonese",
      "first_name": "Amber",
      "hometown": "Montvale, NJ",
      "last_name": "Leung",
      "line_number": 178,
      "little": "n/a",
      "major": "Hotel Administration",
      "nickname": "laveille",
      "semester": "Spring 2020",
      "year": 2023
    },
    {
      "big": "Haena-Young *Mauresque* Lee",
      "description": "working at Goldies and looking at art at the HFJ Museum",
      "ethnicity": "Vietnamese-Chinese",
      "first_name": "Grace",
      "hometown": "Portland, OR",
      "last_name": "Tran",
      "line_number": 179,
      "little": "n/a",
      "major": "Art History & English",
      "nickname": "Bluet",
      "semester": "Spring 2020",
      "year": 2023
    },
    {
      "big": "Joyee *Millésime* Ng",
      "description": "at Starbucks getting my cold brew",
      "ethnicity": "Chinese",
      "first_name": "Lina",
      "hometown": "NYC, NY",
      "last_name": "Cheung",
      "line_number": 180,
      "little": "n/a",
      "major": "Human Development",
      "nickname": "Maélle",
      "semester": "Spring 2020",
      "year": 2022
    },
    {
      "big": "Allison *kith* Kim",
      "description": "in confusion.",
      "ethnicity": "Korean",
      "first_name": "Juliana",
      "hometown": "Mount Olive, NJ",
      "last_name": "Kim",
      "line_number": 181,
      "little": "n/a",
      "major": "ILR",
      "nickname": "trevi",
      "semester": "Spring 2020",
      "year": 2022
    },
    {
      "big": "Vivien *clytemnestra* Lee",
      "description": "in my room napping",
      "ethnicity": "Chinese",
      "first_name": "Tiffany",
      "hometown": "Brooklyn, NY",
      "last_name": "Chen",
      "line_number": 183,
      "little": "n/a",
      "major": "Biology",
      "nickname": "claire voie",
      "semester": "Spring 2020",
      "year": 2023
    },
    {
      "big": "Glora *Bella Vita* Ren",
      "description": "doing my homework in Statler Lounge",
      "ethnicity": "Korean",
      "first_name": "Youna",
      "hometown": "Demarest, NJ",
      "last_name": "Choi",
      "line_number": 184,
      "little": "n/a",
      "major": "Hotel Administration",
      "nickname": "Aqua Vitae",
      "semester": "Spring 2020",
      "year": 2023
    },
    {
      "big": "Annabel *Aqua regia* Lee",
      "description": "going back for my third plate of food",
      "ethnicity": "Chinese",
      "first_name": "Jasmine",
      "hometown": "Portland, OR",
      "last_name": "Yu",
      "line_number": 185,
      "little": "n/a",
      "major": "Biological Sciences",
      "nickname": "mirai",
      "semester": "Spring 2020",
      "year": 2023
    },
    {
      "big": "Melody *VERVAIN* Na",
      "description": "watching Mukbangs or SNL on YouTube",
      "ethnicity": "Chinese",
      "first_name": "Zilin",
      "hometown": "Brooklyn, NY",
      "last_name": "Guo",
      "line_number": 186,
      "little": "n/a",
      "major": "Biology",
      "nickname": "VRIESEA",
      "semester": "Spring 2020",
      "year": 2022
    },
    {
      "big": "Chloe *Antiope* Wang",
      "description": "at the Olin stacks",
      "ethnicity": "Chinese",
      "first_name": "Ziqi",
      "hometown": "Brooklyn, NY",
      "last_name": "Guo",
      "line_number": 187,
      "little": "n/a",
      "major": "Biological Sciences",
      "nickname": "Imara",
      "semester": "Spring 2020",
      "year": 2022
    }
  ]
  
  function openPage(pageName, elmnt, color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].style.backgroundColor = "";
      tablinks[i].style.color = 'white';
    }
    document.getElementById(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;
    elmnt.style.color = '#420000';
  }
  
  function displayClass(clss) {
  
    if (clss == "AB") {
      var sem = "Spring 2018";
  
      for (i = 0; i < data.length; i++) {
        if (data[i].semester == sem) {
          var sister = `<div class="col-3 col-12-medium">
                          <div class="container">
                            <img class="image" src=images/activeroster/SP21/${data[i].line_number}-min.JPG alt="" />
                            <div class="overlay">
                              <div class="text">
                                <h5>#${data[i].line_number}<br>${data[i].first_name} *${data[i].nickname}* ${data[i].last_name}</h5>
                                <p class="sisterDesc">
                                  <b><u>Major:</u></b> ${data[i].major} / ${data[i].year}<br>
                                  <b><u>Ethnicity:</u></b> ${data[i].ethnicity}<br>
                                  <b><u>Hometown:</u></b> ${data[i].hometown}<br>
                                  <b><u>Big:</u></b> ${data[i].big}<br>
                                  <b><u>Little(s):</u></b> ${data[i].little}<br><br>
                                  <b><u>You will usually find me:<br></u></b> ${data[i].description}<br>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>`;
          $("#" + clss + " .row").append(sister);
        }
      }
  
    }
  
    if (clss == "AG") {
      var sem = "Fall 2018";
  
      for (i = 0; i < data.length; i++) {
        if (data[i].semester == sem) {
          var sister = `<div class="col-3 col-12-medium">
                          <div class="container">
                          <img class="image" src=images/activeroster/SP21/${data[i].line_number}-min.JPG alt="" />
                          <div class="overlay">
                              <div class="text">
                                <h5>#${data[i].line_number}<br>${data[i].first_name} *${data[i].nickname}* ${data[i].last_name}</h5>
                                <p class="sisterDesc">
                                  <b><u>Major:</u></b> ${data[i].major} / ${data[i].year}<br>
                                  <b><u>Ethnicity:</u></b> ${data[i].ethnicity}<br>
                                  <b><u>Hometown:</u></b> ${data[i].hometown}<br>
                                  <b><u>Big:</u></b> ${data[i].big}<br>
                                  <b><u>Little(s):</u></b> ${data[i].little}<br><br>
                                  <b><u>You will usually find me:<br></u></b> ${data[i].description}<br>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>`;
          $("#" + clss + " .row").append(sister);
        }
      }
  
    }
  
    if (clss == "AD") {
      var sem = "Spring 2019";
  
      for (i = 0; i < data.length; i++) {
        if (data[i].semester == sem) {
          var sister = `<div class="col-3 col-12-medium">
                          <div class="container">
                          <img class="image" src=images/activeroster/SP21/${data[i].line_number}-min.JPG alt="" />
                          <div class="overlay">
                              <div class="text">
                                <h5>#${data[i].line_number}<br>${data[i].first_name} *${data[i].nickname}* ${data[i].last_name}</h5>
                                <p class="sisterDesc">
                                  <b><u>Major:</u></b> ${data[i].major} / ${data[i].year}<br>
                                  <b><u>Ethnicity:</u></b> ${data[i].ethnicity}<br>
                                  <b><u>Hometown:</u></b> ${data[i].hometown}<br>
                                  <b><u>Big:</u></b> ${data[i].big}<br>
                                  <b><u>Little(s):</u></b> ${data[i].little}<br><br>
                                  <b><u>You will usually find me:<br></u></b> ${data[i].description}<br>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>`;
          $("#" + clss + " .row").append(sister);
        }
      }
  
    }
  
    if (clss == "AE") {
      var sem = "Fall 2019";
  
      for (i = 0; i < data.length; i++) {
        if (data[i].semester == sem) {
          var sister = `<div class="col-3 col-12-medium">
                          <div class="container">
                          <img class="image" src=images/activeroster/SP21/${data[i].line_number}-min.JPG alt="" />
                          <div class="overlay">
                              <div class="text">
                                <h5>#${data[i].line_number}<br>${data[i].first_name} *${data[i].nickname}* ${data[i].last_name}</h5>
                                <p class="sisterDesc">
                                  <b><u>Major:</u></b> ${data[i].major} / ${data[i].year}<br>
                                  <b><u>Ethnicity:</u></b> ${data[i].ethnicity}<br>
                                  <b><u>Hometown:</u></b> ${data[i].hometown}<br>
                                  <b><u>Big:</u></b> ${data[i].big}<br>
                                  <b><u>Little(s):</u></b> ${data[i].little}<br><br>
                                  <b><u>You will usually find me:<br></u></b> ${data[i].description}<br>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>`;
          $("#" + clss + " .row").append(sister);
        }
      }
  
    }
  
    if (clss == "AZ") {
      var sem = "Spring 2020";
  
      for (i = 0; i < data.length; i++) {
        if (data[i].semester == sem) {
          var sister = `<div class="col-3 col-12-medium">
                          <div class="container">
                          <img class="image" src=images/activeroster/SP21/${data[i].line_number}-min.JPG alt="" />
                          <div class="overlay">
                              <div class="text">
                                <h5>#${data[i].line_number}<br>${data[i].first_name} *${data[i].nickname}* ${data[i].last_name}</h5>
                                <p class="sisterDesc">
                                  <b><u>Major:</u></b> ${data[i].major} / ${data[i].year}<br>
                                  <b><u>Ethnicity:</u></b> ${data[i].ethnicity}<br>
                                  <b><u>Hometown:</u></b> ${data[i].hometown}<br>
                                  <b><u>Big:</u></b> ${data[i].big}<br>
                                  <b><u>Little(s):</u></b> ${data[i].little}<br><br>
                                  <b><u>You will usually find me:<br></u></b> ${data[i].description}<br>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>`;
          $("#" + clss + " .row").append(sister);
        }
      }
  
    }
  }
  
  $(document).ready(function () {
    document.getElementById("defaultOpen").click();
    displayClass("AB");
    displayClass("AG");
    displayClass("AD");
    displayClass("AE");
    displayClass("AZ");
  });
  
  
  /*
  <div class="col-3 col-12-medium">
                  <div class="container">
                    <img class="image" src=images/activeroster/142-min.jpg alt="" />
                    <div class="overlay">
                      <div class="text">
                        <h5>#142<br>Jasmine *MIU* Ng</h5>
                        <p class="sisterDesc">
                          <b><u>Major:</u></b> ORIE / 2021<br>
                          <b><u>Ethnicity:</u></b> Chinese<br>
                          <b><u>Hometown:</u></b> Flushing, NY<br>
                          <b><u>Big:</u></b> Min Young Erika *luciole* Kim<br>
                          <b><u>Little(s):</u></b> Amber *laveille* Leung<br><br>
                          <b><u>You will usually find me:<br></u></b> sleeping<br>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
  
  */
  