Widget:TestTabs

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

1. breaker {

       display: block;
       text-align: left;
       font-size: 20px;
       font-weight: bold;
       padding: 5px;
   }

div.charFilter select{ border: 1px solid #000;

   color: #fff;
   background: #444;
   position: relative;
   width: 150px;
   float: right;
   height: 25px;

} div.charFilter{ display: inline-block;

   padding-left: 15px;

padding-right: 15px;

   width: 100%;

} div.filterLeft{ float: left; } div.filterRight{ float: right; } div.charBox {

       display: inline-block;
   padding: 3px;
   position: relative;
   width: calc((100% / 6) - 3px);
   border: 2px solid rgba(0,0,0,0.0);
   filter:  opacity(70%);	
   transition: filter .6s;

border-radius:7px; overflow: hidden;

    margin-bottom:-6px;

} .charBox:hover .charName, .charBox.hovered .charName {

   display: block;

} div#charPanel {

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

}

div.charBox a{ display: block;

   height: 100%;
   color: #F9E4CA;

} .charBox.hovered {

   filter:  opacity(100%);	

}

.charBox:hover { border-color:#F9E4CA;

   filter:  opacity(100%);	

}

div.charName{

   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   font-weight: bold;
   display: none;
   background: rgba(15,15,15,0.7);
   padding: 3px;

font-family: "Cinzel Decorative";

}

div.charBox img { width:150px; } </style>

<script> var series = [];

var obj = {};

 obj["name"] = "";
 obj["image"] = "";
 obj["link"] = "";
 obj["campaigns"] = ;
 series.push(obj);

for(var i = 0; i < series.length; i++){ var campaigns = ""; for(var j = 0; j < series[i].campaigns.length; j++){ campaigns = campaigns + " " + series[i].campaigns[j]; } campaigns = campaigns.substring(1);

$("div#charHolder").append("

<a class='charLink' href='" + series[i].link +"'><img src='" + series[i].image + "'>

" + series[i].name + "

</a>

");

}

$("div#charPanel").prepend("

");

$("div.filterLeft").append("<select id='mainFilter'><option>Season 1</option><option>Season 2</option><option>All Characters</option></select>"); $("div.filterRight").append("<select id='seasonFilter-s1'><option>Season 1 Characters</option><option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</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><option>Guild of Explorers</option><option>Battle of the Bards</option><option>The Blood Snake Queen</option><option>The Death of Virgo</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select> <select id='seasonFilter-s2'><option>Season 2 Characters</option> <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><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select>");

/* Default */ var allS1 = $(".charBox:visible"); $("div.filterRight select:not(#seasonFilter-s1)").hide(); $("div.charBox").hide(); $("div.charBox[data-campaigns*='s1'").show();

$("#seasonFilter-s1").change(function() { $("div.charBox").hide(); $("span#breaker").remove(); if ($(this).val() == "Season 1 Characters") { $("#charHolder").empty(); for(var i = 0; i < allS1.length; i++){ $("#charHolder").append(allS1[i]); } $("div.charBox[data-campaigns*='s1'").show();} if ($(this).val() == "Band of Thieves") { $("div.charBox[data-campaigns*='s1c1-'").show(); $("div#charHolder").find("[data-campaigns*='s1c1-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c1-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Porc Hunters") { $("div.charBox[data-campaigns*='s1c2-'").show(); $("div#charHolder").find("[data-campaigns*='s1c2-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c2-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Jewel of the Dingo Isles") { $("div.charBox[data-campaigns*='s1c3-'").show(); $("div#charHolder").find("[data-campaigns*='s1c3-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c3-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Sunswords") { $("div.charBox[data-campaigns*='s1c5-'").show(); $("div#charHolder").find("[data-campaigns*='s1c5-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c5-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Unseen Rogues") { $("div.charBox[data-campaigns*='s1c6-'").show(); $("div#charHolder").find("[data-campaigns*='s1c6-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c6-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Kobold Headhunters") { $("div.charBox[data-campaigns*='s1c7-'").show(); $("div#charHolder").find("[data-campaigns*='s1c7-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c7-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Zarlin Catacombs") { $("div.charBox[data-campaigns*='s1c8-'").show(); $("div#charHolder").find("[data-campaigns*='s1c8-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c8-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The New Crew") { $("div.charBox[data-campaigns*='s1c9-'").show(); $("div#charHolder").find("[data-campaigns*='s1c9-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c9-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Silvermine Mountains") { $("div.charBox[data-campaigns*='s1c10-'").show(); $("div#charHolder").find("[data-campaigns*='s1c10-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c10-p']:parent:visible").first().before("Player Characters");} }); </script>