Jump to content

  • Who's Who Challenge Entry

       (0 reviews)

    A who' who template.  Click on the player's name to expand or hide their list of characters.  Both the character names and images include a link to the player's application/history or whatever you would like.  The images are automatically converted to black and white and turn to color on hover so will work best with color images.  The template resizes depending on browser & window size.

     

    Javascript modified from W3Schools.

     

    Please note that despite the preview, the formatting for the button font should remain the same as in the attached images that show it in use on a jcink forum.

    Actual Template Not Responsive

    Who's Who
    Character 1
    Character Name
    Character 1
    Character Name
    Character 1
    Character Name

    Template code

    <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>
    Go to codes Staff Templates

    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept