Widget:TestTabs

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>

<style>

1. supportContainer .wikitable, #supportContainer td, #supportContainer tr{

 border: none;
 background: none;

}

1. supportContainer {

 background: rgba(68,68,68,0.2);
 border-radius: 15px;
 border: 2px solid #8b4513;
 padding: 10px;

}

1. s1, #s2 {

border: 1px solid #000;

   font-size: 14px;
   color: #fff;
   background: #444;
   padding: 2px;
 position: relative;
 left: 35%;
 width: 220px;

}

button {

     background-color: #b36e14;
   float: left;
   border: 1px solid #64320d;
   outline: none;
   cursor: pointer;
   padding: 7px 16px;
   transition: 0.3s;
   display: inline;
 color: white;

}

1. buttons {

 text-align: center;
 position: relative;
 left: 35%;
 padding-top: 20px;

} </style>

<button id="b-s1" onclick="readbutton(this)"> Season One </button> <button id="b-s2" onclick="readbutton(this)"> Season Two </button>

<select id="s1"> <option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</option> <option>The Many Gobos of Pat</option> <option>The Sunswords</option> <option>The Unseen Rogues</option> <option>Kobold Headhunters</option> <option>Zarlin Catacombs</option> <option>The New Crew</option> <option>Silvermine Mountains</option> </select>

<select id="s2"> <option>Woodcarvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>The Tower of Ultimate Wizardry: Chapter One</option> <option>Unexpected Discovery</option> <option>Buckeroos</option> <option>Fall of Dundinborough</option> <option>Den of Devils</option> <option>The Skeleton King</option> </select>

<script> var series = []; var obj = {}; obj["table"] = ""; series.push(obj);

for(var i = 0; i < series.length; i++){ $("#supportContainer").append(series[i].table);

}

$("#s1").show(); $("#s2").hide();

function readbutton(val){ /* On button click */ if(val.id == "b-s2"){ $(".info").hide(); $("#b-s2").css('background-color', '#89540F'); $("#b-s1").css('background-color', '#b36e14'); $('#s1').prop('selectedIndex',0); $("#WC").show(); $("#s1").hide(); $("#s2").show(); } if(val.id == "b-s1"){ $(".info").hide(); $("#b-s1").css('background-color', '#89540F'); $("#b-s2").css('background-color', '#b36e14'); $('#s2').prop('selectedIndex',0); $("#BoT").show(); $("#s1").show(); $("#s2").hide(); } } /* Default values */ $("#b-s1").css('background-color', '#89540F'); $(".info").hide(); $("#BoT").show();

/* On S1 select change */ $("select#s1").change(function () { $(".info").hide(); if($(this).val() == "Band of Thieves"){ $("#BoT").show(); } if($(this).val() == "Porc Hunters"){ $("#PH").show(); } if($(this).val() == "The Jewel of the Dingo Isles"){ $("#JDI").show(); } if($(this).val() == "The Many Gobos of Pat"){ $("#MGP").show(); } if($(this).val() == "The Sunswords"){ $("#TSS").show(); } if($(this).val() == "The Unseen Rogues"){ $("#TUR").show(); } if($(this).val() == "Kobold Headhunters"){ $("#KHH").show(); } if($(this).val() == "Zarlin Catacombs"){ $("#TZC").show(); } if($(this).val() == "The New Crew"){ $("#TNC").show(); } if($(this).val() == "Silvermine Mountains"){ $("#SMM").show(); } });

/* On S2 select change */ $("select#s2").change(function () { $(".info").hide(); if($(this).val() == "Woodcarvers"){ $("#WC").show(); } if($(this).val() == "Okagnoma Guild Hall"){ $("#OGH").show(); } if($(this).val() == "Murder Bros"){ $("#MB").show(); } if($(this).val() == "The Cobblers"){ $("#TC").show(); } if($(this).val() == "The Tower of Ultimate Wizardry: Chapter One"){ $("#TUW1").show(); } if($(this).val() == "Unexpected Discovery"){ $("#UD").show(); } if($(this).val() == "Buckeroos"){ $("#BCK").show(); } if($(this).val() == "Fall of Dundinborough"){ $("#FOD").show(); } if($(this).val() == "Den of Devils"){ $("#DOD").show(); } if($(this).val() == "The Skeleton King"){ $("#TSK").show(); } });

</script>