Widget:CampaignCards

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

<script> var series1 = [];

var obj = {};

 obj["name"] = "";
 obj["image"] = "";
 obj["season"] = "";
 obj["content"] = ;
 obj["key"] = "";
 obj["height"] = "";

 series1.push(obj);

for(var i = 0; i < series1.length; i++){ console.log(series1[0].image);

$(".campaign-holder").append('

<img class="campaignbox-image" src="' + series1[i].image + '">

'+ series1[i].season +'

' + series1[i].name + '

' + series1[i].content + '

');

} function openCard2(card){

var id = card.id var height = $(card).attr("data-height"); $("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow'); $(".campaignbox:not('div#" + id + "')").hide(); if(!$("div#" + id).hasClass("opened")){

$("div#" + id).animate({width:'650px', height: height}, function(){ $(".campaignbox:not('div#" + id + "')").fadeOut(); }); $("div#" + id + " div:not('.campaignbox-content')").hide('slow'); $("div#" + id + " .campaignbox-content").show('slow'); } else { $("div#" + id).animate({width:'200px', height: '184px'}, function(){ $("div#" + id + " .campaignbox-content").hide(); $(".campaignbox:not('div#" + id + "')").show(); $(".campaignbox:not('div#" + id + "')").fadeIn(); }); $("div#" + id + " div:not('.campaignbox-content')").show('slow'); } card.onclick = "openCard(this)" $("div#" + id).toggleClass("opened"); }

function openCard(card){

var id = card.id var height = $(card).attr("data-height"); $("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow'); $(".campaignbox:not('div#" + id + "')").hide(); if(!$("div#" + id).hasClass("opened")){ card.onclick = "openCard(this)"; $("div#" + id).animate({width:'650px', height: height}, function(){ $(".campaignbox:not('div#" + id + "')").fadeOut(); }); $("div#" + id + " div:not('.campaignbox-content')").hide('slow'); $("div#" + id + " .campaignbox-content").show('slow'); } else { $("div#" + id).animate({width:'200px', height: '184px'}, function(){ $("div#" + id + " .campaignbox-content").hide(); $(".campaignbox:not('div#" + id + "')").show(); $(".campaignbox:not('div#" + id + "')").fadeIn(); }); $("div#" + id + " div:not('.campaignbox-content')").show('slow'); } card.onclick = ""; $("div#" + id).toggleClass("opened"); } </script>

<style> .character-portrait {

 object-fit: cover;
 width: 60px;
 height: 125px;
 margin: 3px;

} .campaignbox.opened {

 width: 650px;
 height: 184px;
 border: 3px solid white;
 border-radius: 10px;
 overflow: hidden;
 display: inline-block;
 background: rgb(33, 33, 33);
 margin: 8px;

} .campaignbox {

 width: 200px;
 height: 184px;
 border: 3px solid white;
 border-radius: 10px;
 overflow: hidden;
 display: inline-block;
 background: rgb(33, 33, 33);
 margin: 8px;

} .campaignbox-card {

   cursor: pointer;

} .campaignbox-image {

 width: 100%;
 opacity:0.85;
 margin-bottom: -5px;

} .campaignbox-text {

 padding: 0.01em 5px;
 color: white;
 text-align: center;

} .campaignbox-content {

 display: none;
 color:white;
 padding: 16px;
 }

</style>