Widget:SupporterTabs

<style>

1. supportContainer {

 background: #444;
 border-radius: 5px;
 border:red 5px;

}

select { border: 1px solid #000;

   font-size: 14px;
   color: #fff;
   background: #444;
   padding: 2px;

}

button {

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

}

1. buttons {

 text-align: center;

}

</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>Wood Carvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>Tower of Ultimate Wizardry</option> <option>Unexpected Discovery</option> <option>The Buckeroos</option> <option>The Fall of Dundinborough</option> <option>Den of Devils</option> <option>Skeleton King</option> </select>

sdf

<script> $("#s1").show(); $("#s2").hide();

function readbutton(val){ if(val.id == "b-s2"){ $(".info").hide(); $('#s1').prop('selectedIndex',0); $("#s1").hide(); $("#s2").show(); } if(val.id == "b-s1"){ $(".info").hide(); $('#s2').prop('selectedIndex',0); $("#s1").show(); $("#s2").hide(); } }

$("#tabspace").slideUp(500); $("b-s1") $("select#s1").change(function () { if($(this).val() == "Porc Hunters"){ $("#tabspace").slideDown(500); } else { $("#tabspace").slideUp(500); } }); </script>