Add styles to the Tab

assets/css/styles.css

@@ -2,6 +2,22 @@ body {
     background-color: #EEEEEE;
 }
 
+.tab-button {
+  background-color: #e7e7e7; /* Gray */
+  color: black;
+  border: 1px solid grey;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+
+.tab-button.active {
+  background-color: #008CBA; /* Blue */
+  color: white;
+}
+
 .se-pre-con {
     position: fixed;
     left: 0px;

assets/js/script.js

 $(document).ready(function(){
 
-	// current year
-	$('#currYear').html((new Date()).getFullYear());
+		// tab switch
+		$(document).on('click', '#tab', function() {
+			// reset all
+			$('#output').hide();
+			$('.tab-button').removeClass('active');
+			$('.option').hide();
+
+			// set active
+			var currentID = $(this).attr('tab');
+			$(this).addClass('active');
+			$('#'+currentID).show();
+		});
+
+		// current year
+		$('#currYear').html((new Date()).getFullYear());
 
     // Load all the archive formats
 		loadArchiveFormats(['rar', 'zip', 'tar']);

index.html

@@ -15,29 +15,36 @@
 
         <center>
             <fieldset>
-                <legend>Open Comic (Choose file from you computer)</legend>
-                <input type="file" name="fileup" id="fileup" accept=".cbr,.cbz,.cbt"><br>
-                <i>(cbr,cbz,cbt files only)</i>
-            </fieldset>
-            <br><br>
+              <legend>
+                <button class="tab-button active" id="tab" tab="upload">Choose file from you computer</button>
+                <button class="tab-button" id="tab" tab="internal">Open file stored in the server</button>
+              </legend>
+              <br>
 
-            <fieldset>
-                <legend>Open Comic (Open comic file stored in the server)</legend>
-                <button id="readNow" comic_title="whizzkids_united.cbz">
-                  <img src='./comics/whizzkids_united_thumb.jpg' class='imgUrl'/>
-                  <br>Whizzkids United vs HIV
-                </button>
-
-                <button id="readNow" comic_title="zack_and_max.cbz">
-                  <img src='./comics/zack_and_max_thumb.jpg' class='imgUrl'/>
-                  <br>The Adventures of Zack &amp; Max
-                </button>
-
-                <button id="readNow" comic_title="comic_strip.cbz">
-                  <img src='./comics/comic_strip_thumb.jpg' class='imgUrl'/>
-                  <br>Alien Comic Strip
-                </button>
+              <div id="upload" class="option">
+                  <input type="file" name="fileup" id="fileup" accept=".cbr,.cbz,.cbt"><br>
+                  <i>(cbr,cbz,cbt files only)</i>
+              </div>
+
+              <div id="internal" class="option" style="display:none">
+                  <button id="readNow" comic_title="whizzkids_united.cbz">
+                    <img src='./comics/whizzkids_united_thumb.jpg' class='imgUrl'/>
+                    <br>Whizzkids United vs HIV
+                  </button>
+
+                  <button id="readNow" comic_title="zack_and_max.cbz">
+                    <img src='./comics/zack_and_max_thumb.jpg' class='imgUrl'/>
+                    <br>The Adventures of Zack &amp; Max
+                  </button>
+
+                  <button id="readNow" comic_title="comic_strip.cbz">
+                    <img src='./comics/comic_strip_thumb.jpg' class='imgUrl'/>
+                    <br>Alien Comic Strip
+                  </button>
+              </div>
+              <br>
             </fieldset>
+
             <br><br>
 
             <!-- output comics images here -->