An easy to use, clean looking Profile Template

Everything related to our vore chat room and vore roleplaying room can go here!

An easy to use, clean looking Profile Template

Postby Someone92 » Tue May 04, 2021 11:48 am

In this thread I present a profile template.
The goal is not a flashy profile, but a clean looking, easy to read and easy to edit profile for you to use and adept to your likings and needs.

What the basic version of this template already does:
- Ability to copy paste your profile from a text editor, and have it look almost exactly as in your text editor without any further formatting
- Profile picture is centered, and dynamically downsized to the viewer's screen if need be
- Preferences sliders are centered, and have a border to make long descriptions easier to read
- Functionally to automatically downsize linked pictures
- Functionally to hide / show parts of the profile with press on a button, text or picture



For a sample of this template in action see:
https://rp.aryion.com/profile/Good_Soul

For a complete profile that uses this template see:
https://rp.aryion.com/profile/Tre_
https://rp.aryion.com/profile/Lilitu_





How to use this template?

- Go to "Edit Profile"
- Check the box "Use HTML For Profile Body"
- Copy this to the box beneath "Stylesheet"
Code: Select all
/* Remove the "//" if you want to hide your profile name */
#charname {
//   display: none;
}

/* Centers the profile picture, and makes sure it is at max as wide as the browser */
img.profile-image{
   border-radius: 16px;
   max-width: 100%;
   height: auto;
   margin: 0px;
//   border-style: solid; /* remove the "//" to add a colored border to the profile pic */
//   border-width: 4px; /* remove the "//" to add a colored border to the profile pic */
//   border-color: #6060FF; /* male */ /* remove the "//" from the color you want */
//   border-color: #D93838; /* female */
//   border-color: #C32AAF; /* herm */
}

/* Centers the profile picture, and makes sure the profile description appears underneath it */
.profile-image-container{
   width: 100%;
   text-align: center;
}

/* Gives the pref sliders thin dashed borders so it becomes easier to discern where one description ends and the next one begins */
td {
   border: 1px dashed grey;
   padding: 6px 2px; /* Adds some space between the description and the borders to make the text easier to read */
   text-align: left;
}

/* Centers the pref buttons */
div#pref-sliders{
   text-align: center;
}

/* Centers the pref sliders */
table#pref-slider-table{
   margin: auto;
   max-width: 1080px; /* Makes sure the prefs sliders + description does not exeed 1080 pixels so you can read them comfortably even on a wide monitor; adjust the value as you see fit */
}

.wrapper_for_RunningText{
   white-space: pre-line;
   margin: auto;
   text-align: left;
   font-family: Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
   max-width: 1080px; /* Makes sure the profile description does not exeed X pixels so you can read them comfortably even on a wide monitor; adjust the value as you see fit */
   padding: 5px 25px 5px 25px;
}

/* For up to 10 spoilers (show / hide content by clicking on something) */

div#div_ShowHide_1 {
   display: none;
}

div#div_ShowHide_2 {
   display: none;
}

div#div_ShowHide_3 {
   display: none;
}

div#div_ShowHide_4 {
   display: none;
}

div#div_ShowHide_5 {
   display: none;
}

div#div_ShowHide_6 {
   display: none;
}

div#div_ShowHide_7 {
   display: none;
}

div#div_ShowHide_8 {
   display: none;
}

div#div_ShowHide_9 {
   display: none;
}

div#div_ShowHide_10 {
   display: none;
}

.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

img.smallImage {
   max-width: 100%;
   width: 400px;
}

img.bigImage {
   max-width: 100%;
   width: auto;
   max-height: 1000px; /* Limits the height of the image to 1000 px; you can freely change this number */
}





/* For text-based spoiler-button */
span.span_ShowHide {
   color: #95c8d8;
   border-bottom: 2px dotted white;
}





/* Keep this? */
/* Keep this? */
/* Keep this? */

/* Keep this? */
/* Keep this? */
/* Keep this? */
.center_Text_Align {
   text-align: center;
}

/* Keep this? */
/* Keep this? */
/* Keep this? */
span.cursive {
   font-style: italic;
}

/* Keep this? */
/* Keep this? */
/* Keep this? */
.SmallFont {
   font-size: 10px;
}


- Copy this the box beneath "JavaScript"
Code: Select all
function onclick_ShowHide_1() {
   var x = document.getElementById("div_ShowHide_1");
   var z = document.getElementById("span_ShowHide_1");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_2() {
   var x = document.getElementById("div_ShowHide_2");
   var z = document.getElementById("span_ShowHide_2");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_3() {
   var x = document.getElementById("div_ShowHide_3");
   var z = document.getElementById("span_ShowHide_3");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_4() {
   var x = document.getElementById("div_ShowHide_4");
   var z = document.getElementById("span_ShowHide_4");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_5() {
   var x = document.getElementById("div_ShowHide_5");
   var z = document.getElementById("span_ShowHide_5");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_6() {
   var x = document.getElementById("div_ShowHide_6");
   var z = document.getElementById("span_ShowHide_6");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_7() {
   var x = document.getElementById("div_ShowHide_7");
   var z = document.getElementById("span_ShowHide_7");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_8() {
   var x = document.getElementById("div_ShowHide_8");
   var z = document.getElementById("span_ShowHide_8");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_9() {
   var x = document.getElementById("div_ShowHide_9");
   var z = document.getElementById("span_ShowHide_9");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}

function onclick_ShowHide_10() {
   var x = document.getElementById("div_ShowHide_10");
   var z = document.getElementById("span_ShowHide_10");
   if (x.style.display === "block") {
      x.style.display = "none";
      z.innerText = "Write here what you want to see if content is hidden";
   } else {
      x.style.display = "block";
      z.innerText = "Write here what you want to hide if content is visible";
   }
}


- Copy this to the box beneath "Profile Body"
Code: Select all
<div class="wrapper_for_RunningText">Placeholder - simply copy and paste the profile you have written here</div>


- That's it for the basic template!



To have a part of your profile hidden, and only become visible / hidden again when you click on something add this:
!!! Important: Add this before the </div> from the Basic Template !!!
Code: Select all
<div class="center_Text_Align"><span id="span_ShowHide_1" class="span_ShowHide" onclick="onclick_ShowHide_1()">Click here to see content</span></div>

<div id="div_ShowHide_1">Everything here toggles visibility</div>


You can add more hidden sections by simply copy-and-paste the above code and replace every _1 with a _2, _3, and so on up to _10.









New Code
Spoiler: show

Profile Body
Code: Select all
<!--<span class="sex-symbol_male" id="sex-symbol"> ♂</span>-->
<!--<span class="sex-symbol_female" id="sex-symbol"> ♀</span>-->
<!--<span class="sex-symbol_herm"  id="sex-symbol"> ⚥</span>-->
<!-- Remove the <! -> from the symbol you wanna use, if any -->



<div class="wrapper_For_Entire_Profile">



<span class="wrapper_For_RunningText">Barton waited twenty always repair in within we do. An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted.</span>

<div class="center"><span class="toggleable_ShowHide" id="clickable_ShowHide_1" onclick="onclick_Toggleable_ShowHide_1()">Show</span></div>
<div id="toggleable_ShowHide_1" class="wrapper_For_RunningText">Content 1
An so vulgar to on points wanted. Not rapturous resolving continued household northward gay. He it otherwise supported instantly. Unfeeling agreeable suffering it on smallness newspaper be. So come must time no as. Do on unpleasing possession as of unreserved. Yet joy exquisite put sometimes enjoyment perpetual now. Behind lovers eat having length horses vanity say had its.</div>

<div class="center"><span class="toggleable_ShowHide" id="clickable_ShowHide_2" onclick="onclick_Toggleable_ShowHide_2()">Show</span></div>
<div id="toggleable_ShowHide_2" class="wrapper_For_RunningText">Content 2
Style too own civil out along. Perfectly offending attempted add arranging age gentleman concluded. Get who uncommonly our expression ten increasing considered occasional travelling. Ever read tell year give may men call its. Piqued son turned fat income played end wicket. To do noisy downs round an happy books.</div>

<div class="center"><span class="switchable_ShowHide" onclick="onclick_Switchable_ShowHide_1()">Show 1</span> | <span class="switchable_ShowHide" onclick="onclick_Switchable_ShowHide_2()">Show 2</span> | <span class="switchable_ShowHide" onclick="onclick_Switchable_ShowHide_3()">Show 3</span></div>
<div id="switchable_ShowHide_1" class="wrapper_For_RunningText">Content 1
An so vulgar to on points wanted. Not rapturous resolving continued household northward gay. He it otherwise supported instantly. Unfeeling agreeable suffering it on smallness newspaper be. So come must time no as. Do on unpleasing possession as of unreserved. Yet joy exquisite put sometimes enjoyment perpetual now. Behind lovers eat having length horses vanity say had its.</div>
<div id="switchable_ShowHide_2" class="wrapper_For_RunningText">Content 2
Style too own civil out along. Perfectly offending attempted add arranging age gentleman concluded. Get who uncommonly our expression ten increasing considered occasional travelling. Ever read tell year give may men call its. Piqued son turned fat income played end wicket. To do noisy downs round an happy books.</div>
<div id="switchable_ShowHide_3" class="wrapper_For_RunningText">Content 3
Add you viewing ten equally believe put. Separate families my on drawings do oh offended strictly elegance. Perceive jointure be mistress by jennings properly. An admiration at he discovered difficulty continuing. We in building removing possible suitable friendly on. Nay middleton him admitting consulted and behaviour son household. Recurred advanced he oh together entrance speedily suitable. Ready tried gay state fat could boy its among shall.</div>



</div>


Stylesheet
Code: Select all
#charname {
//   display: none;
}

.sex-symbol_male  {
   color: #6060FF;
}

.sex-symbol_female  {
   color: #D93838;
}

.sex-symbol_herm  {
   color: #C32AAF;
}

#sex-symbol  {
   
}

#SOIB_Signature {
   font-size: 24px;
   border: 5px solid #EE8888;
   border-radius: 25px;
   width: 90px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: auto;
   margin-right: auto;
   margin-left: auto;
   border-style: outset;
   font-family: 'Brush Script MT', cursive;
   font-weight: 400;
}





/* Centers the profile picture, and makes sure it is at max as wide as the browser */
img.profile-image{
   max-width: 100%;
   height: auto;
   margin: 0px;
//   border-radius: 16px; /* Rounds the corners of the profile image */
//   border-style: solid; /* Adds a solid border around the profile image */
//   border-width: 4px; /* Determines how thick the border should be*/
//   border-color: #6C9DC6; /* SOIB-male */
//   border-color: #d016d0; /* SOIB-female */
//   border-color: #6060FF; /* Eka-male */
//   border-color: #D93838; /* Eka-female */
//   border-color: #C32AAF; /* Eka-herm */
}

/* Centers the profile picture, and makes sure the profile description appears underneath it */
.profile-image-container{
   width: 100%;
   text-align: center;
}

/* Gives the pref sliders thin dashed borders so it becomes easier to discern where one description ends and the next one begins */
td {
   border: 1px dashed grey;
   padding: 6px 2px; /* Adds some space between the description and the borders to make the text easier to read */
   text-align: left;
}

/* Centers the pref buttons */
div#pref-sliders{
   text-align: center;
}

/* Centers the pref sliders */
table#pref-slider-table{
   margin: auto;
   max-width: 1080px; /* Makes sure the prefs sliders + description does not exeed 1080 pixels so you can read them comfortably even on a wide monitor; adjust the value as you see fit */
}



.wrapper_For_Entire_Profile{
   max-width: 1080px; /* Makes sure the profile description does not exeed X pixels so you can read them comfortably even on a wide monitor; adjust the value as you see fit */
   margin: auto;
}



div.center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}



.wrapper_For_RunningText {
   white-space: pre-line;
//   text-align: left;
//   font-family: Quicksand, sans-serif;
//   font-family: Arial, sans-serif;
//   font-size: 16px;
//   line-height: 1.5;
//   padding: 5px 25px 5px 25px;
}



/* Determines how the text that acts like a button looks like */
.toggleable_ShowHide {
   color: #95c8d8;
   border-bottom: 2px dotted white;
}

/* Determines how the text that acts like a button looks like */
.switchable_ShowHide {
   color: #95c8d8;
   border-bottom: 2px dotted white;
}

#toggleable_ShowHide_1 {
   display: none;
}

#toggleable_ShowHide_2 {
   display: none;
}

#toggleable_ShowHide_3 {
   display: none;
}

#toggleable_ShowHide_4 {
   display: none;
}

#toggleable_ShowHide_5 {
   display: none;
}

#toggleable_ShowHide_6 {
   display: none;
}

#toggleable_ShowHide_7 {
   display: none;
}

#toggleable_ShowHide_8 {
   display: none;
}

#toggleable_ShowHide_9 {
   display: none;
}

#toggleable_ShowHide_101 {
   display: none;
}

#toggleable_ShowHide_102 {
   display: none;
}



#switchable_ShowHide_1 {
   display: inline;
}

#switchable_ShowHide_2 {
   display: none;
}

#switchable_ShowHide_3 {
   display: none;
}

#switchable_ShowHide_4 {
   display: none;
}

#switchable_ShowHide_5 {
   display: none;
}

#switchable_ShowHide_6 {
   display: none;
}

#switchable_ShowHide_7 {
   display: none;
}

#switchable_ShowHide_8 {
   display: none;
}

#switchable_ShowHide_9 {
   display: none;
}


JavaScript
Code: Select all


$(document).ready(function(){
  $("#charname span").text("AddCharNameHere")
});

$(document).ready(function(){
//   $('#pref-sliders').detach().appendTo('#appendPrefSlidersHere')
});

$(document).ready(function(){
   var x = document.getElementById("pref-show-pred");
   var y = document.getElementById("pref-show-prey");
//   x.innerText = "As Female Pred";
//   y.innerText = "As Male Prey";
});

$(document).ready(function(){
   $('#sex-symbol').detach().appendTo('#charname')
});

$(document).ready(function(){
   $('#SOIB_Signature').detach().appendTo('#charname')
});





function onclick_Toggleable_ShowHide_1() {
   var x = document.getElementById("toggleable_ShowHide_1");
   var z = document.getElementById("clickable_ShowHide_1");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_2() {
   var x = document.getElementById("toggleable_ShowHide_2");
   var z = document.getElementById("clickable_ShowHide_2");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_3() {
   var x = document.getElementById("toggleable_ShowHide_3");
   var z = document.getElementById("clickable_ShowHide_3");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_4() {
   var x = document.getElementById("toggleable_ShowHide_4");
   var z = document.getElementById("clickable_ShowHide_4");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_5() {
   var x = document.getElementById("toggleable_ShowHide_5");
   var z = document.getElementById("clickable_ShowHide_5");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_6() {
   var x = document.getElementById("toggleable_ShowHide_6");
   var z = document.getElementById("clickable_ShowHide_6");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_7() {
   var x = document.getElementById("toggleable_ShowHide_7");
   var z = document.getElementById("clickable_ShowHide_7");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_8() {
   var x = document.getElementById("toggleable_ShowHide_8");
   var z = document.getElementById("clickable_ShowHide_8");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_9() {
   var x = document.getElementById("toggleable_ShowHide_9");
   var z = document.getElementById("clickable_ShowHide_9");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Show"; /* This text can be replaced with anything you want */
   } else {
      x.style.display = "inline";
      z.innerText = "Hide"; /* This text can be replaced with anything you want */
   }
}

function onclick_Toggleable_ShowHide_101() {
   var x = document.getElementById("toggleable_ShowHide_101");
   var z = document.getElementById("clickable_ShowHide_101");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Click here to display the backstory";
   } else {
      x.style.display = "inline";
      z.innerText = "Click here to hide the backstory";
   }
}

function onclick_Toggleable_ShowHide_102() {
   var x = document.getElementById("toggleable_ShowHide_102");
   var z = document.getElementById("clickable_ShowHide_102");
   if (x.style.display === "inline") {
      x.style.display = "none";
      z.innerText = "Click here to display OOC";
   } else {
      x.style.display = "inline";
      z.innerText = "Click here to hide OOC";
   }
}











function onclick_Switchable_ShowHide_1() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "inline";
      x2.style.display = "none";
      x3.style.display = "none";
      x4.style.display = "none";
      x5.style.display = "none";
      x6.style.display = "none";
      x7.style.display = "none";
      x8.style.display = "none";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_2() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "inline";
      x3.style.display = "none";
      x4.style.display = "none";
      x5.style.display = "none";
      x6.style.display = "none";
      x7.style.display = "none";
      x8.style.display = "none";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_3() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "none";
      x3.style.display = "inline";
      x4.style.display = "none";
      x5.style.display = "none";
      x6.style.display = "none";
      x7.style.display = "none";
      x8.style.display = "none";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_4() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "none";
      x3.style.display = "none";
      x4.style.display = "inline";
      x5.style.display = "none";
      x6.style.display = "none";
      x7.style.display = "none";
      x8.style.display = "none";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_5() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "none";
      x3.style.display = "none";
      x4.style.display = "none";
      x5.style.display = "inline";
      x6.style.display = "none";
      x7.style.display = "none";
      x8.style.display = "none";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_6() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "none";
      x3.style.display = "none";
      x4.style.display = "none";
      x5.style.display = "none";
      x6.style.display = "inline";
      x7.style.display = "none";
      x8.style.display = "none";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_7() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "none";
      x3.style.display = "none";
      x4.style.display = "none";
      x5.style.display = "none";
      x6.style.display = "none";
      x7.style.display = "inline";
      x8.style.display = "none";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_8() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "none";
      x3.style.display = "none";
      x4.style.display = "none";
      x5.style.display = "none";
      x6.style.display = "none";
      x7.style.display = "none";
      x8.style.display = "inline";
      x9.style.display = "none";
}

function onclick_Switchable_ShowHide_9() {
   var x1 = document.getElementById("switchable_ShowHide_1");
   var x2 = document.getElementById("switchable_ShowHide_2");
   var x3 = document.getElementById("switchable_ShowHide_3");
   var x4 = document.getElementById("switchable_ShowHide_4");
   var x5 = document.getElementById("switchable_ShowHide_5");
   var x6 = document.getElementById("switchable_ShowHide_6");
   var x7 = document.getElementById("switchable_ShowHide_7");
   var x8 = document.getElementById("switchable_ShowHide_8");
   var x9 = document.getElementById("switchable_ShowHide_9");
      x1.style.display = "none";
      x2.style.display = "none";
      x3.style.display = "none";
      x4.style.display = "none";
      x5.style.display = "none";
      x6.style.display = "none";
      x7.style.display = "none";
      x8.style.display = "none";
      x9.style.display = "inline";
}


See it in action:
https://rp.aryion.com/profile/Playground
User avatar
Someone92
Intermediate Vorarephile
 
Posts: 366
Joined: Sun Jan 10, 2010 6:26 pm

Return to Our chat room

Who is online

Users browsing this forum: No registered users

cron