Enlist options

css/main.css

@@ -208,12 +208,6 @@ th {
     min-width: 250px;
 }
 
-.div {
-    display: none;
-    border: 2px solid lightgreen;
-    min-width: 50px;
-}
-
 .footer {
     border-top: 2px solid lightgreen;
     font-family: 'Roboto', sans-serif;
@@ -232,6 +226,19 @@ th {
     text-align: right;
 }
 
+.option_list ul li {
+    display: inline;
+    list-style-type: none;
+}
+
+.option_list ul {
+    padding: 5px;
+}
+
+.option_list li {
+    padding: 3px;
+}
+
 /* hamburger menu stuff */
 
 @media only screen and (max-width: 950px) {

index.html

@@ -70,9 +70,8 @@
 
             At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
         </p>
-        <p class="hideOptions">Show/Hide: </p>
-        <button onClick="div_change('options')">Show Options</button>
-        <div id="options" class="div"></div>
+
+        <div id="options" class="option_list"></div>
 
         <div class="table-wrapper">
             <table id="t01"></table>

js/table.js

@@ -263,12 +263,6 @@ function stringPerToSlash(columnname) {
     return columnname.includes(" per ") ? columnname.replace(" per ", " / ") : columnname;
 }
 
-function div_change(strID) {
-    document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'inline-block' : 'none';
-    document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'inline-block' : 'none';
-    document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'inline-block' : 'none';
-}
-
 function registerHamburgerToggleClickListener() {
     let menu = document.querySelector("#menu");
     let header = document.querySelector("#header");