Who's Who Challenge Entry

<style>

@import url('https://fonts.googleapis.com/css?family=Over+the+Rainbow');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

.theshell {
     margin: 0 auto;
     width: 80%;
}
 .collapsible {
     background-image: url(https://images.rpginitiative.com/uploads/monthly_2019_01/pinksparkles.png.53f9e0bf9c741640077214b9df438d8b.png);
     color: white;
     padding: 10px;
     width: 100%;
     border: 1px solid black;
     text-align: left;
     outline: none;
     font-size: 2em;
     font-family: 'Over the Rainbow', cursive;
     text-shadow: 3px 3px 4px #000;
}
 .collapsible2 {
     background-image: url(https://images.rpginitiative.com/uploads/monthly_2019_01/rosegold1.png.692dd28742239d147e305970f83fd358.png);
     color: white;
     padding: 10px;
     width: 100%;
     border: 1px solid black;
     text-align: right;
     outline: none;
     font-size: 2em;
     font-family: 'Over the Rainbow', cursive;
     text-shadow: 2px 2px 5px #000, 4px 4px 10px #000;
}
 .titletop {
     background-image: url(https://images.rpginitiative.com/uploads/monthly_2019_01/rosegold1.png.692dd28742239d147e305970f83fd358.png);
     color: white;
     border-radius: 15px 15px 0px 0px;
     padding: 10px;
     border: none;
     text-align: center;
     outline: none;
     font-size: 3em;
     font-family: 'Over the Rainbow', cursive;
     text-shadow: 3px 3px 4px #000;
}
 .titlebottom {
     background-image: url(https://images.rpginitiative.com/uploads/monthly_2019_01/rosegold1.png.692dd28742239d147e305970f83fd358.png);
     color: white;
     border-radius: 0px 0px 15px 15px;
     padding: 5%;
     border: none;
     text-align: center;
     outline: none;
     font-size: 2em;
     font-family: 'Over the Rainbow', cursive;
}
 .active, .collapsible:hover {
     background-color: #555;
}
 .contentbox {
     padding: 0 10px;
     margin: 0 auto;
     display: none;
     overflow: hidden;
     background-color: #000;
     color: #fff;
     text-align: center;
}
 .contentsmall {
     background-color: #412727;
     border: 3px solid black;
     width: 20%;
     padding: 5px;
     text-align: center;
     display: inline-block;
     font-family: 'Playfair Display', serif;
     text-transform: uppercase;
     line-height: 100%;
     font-size: 1.15em;
}
 .contentsmall a {
     color: #c98f88;
}
 .contentsmall a:hover {
     color: #c5ae8f;
}
 .contentsmall img {
     border: 1px solid #905a62;
     width: 100%;
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
     -webkit-transition: all .8s ease-in-out;
}
 .contentsmall img:hover {
     filter: none;
     -webkit-filter: grayscale(0);
     -webkit-transform: scale(1.01);
}


</style>


<div class="theshell">
	<div class="titletop">Who's Who</div>
	
  	<button class="collapsible">Player Name 1 </button>
	<div class="contentbox">
  	 
   		<div class="contentsmall"><a href="characterapplink"><img src="https://placehold.it/150x150" alt="Character 1"></a><br><a href="test">Character Name</a></div>
      
	</div>
  
	<button class="collapsible2">Player Name 2</button>
	<div class="contentbox">
   
   		<div class="contentsmall"><img src="https://placehold.it/150x150" alt="Character 1"><br><a href="characterapplink">Character Name</a></div>
   
	</div>
  
	<button class="collapsible">Player Name 3</button>
		<div class="contentbox">
   
   <div class="contentsmall"><img src="https://placehold.it/150x150" alt="Character 1"><br><a href="characterapplink">Character Name</a></div>
   
		</div>
	<div class="titlebottom"> </div>
</div>
<script>
   var coll = document.getElementsByClassName("collapsible");
   var i;
   
   for (i = 0; i < coll.length; i++) {
     coll[i].addEventListener("click", function() {
       this.classList.toggle("active");
       var content = this.nextElementSibling;
       if (content.style.display === "block") {
         content.style.display = "none";
       } else {
         content.style.display = "block";
       }
     });
   }
   
   var coll = document.getElementsByClassName("collapsible2");
   var i;
   
   for (i = 0; i < coll.length; i++) {
     coll[i].addEventListener("click", function() {
       this.classList.toggle("active");
       var content = this.nextElementSibling;
       if (content.style.display === "block") {
         content.style.display = "none";
       } else {
         content.style.display = "block";
       }
     });
   }
   
   
   
</script>