Sign in to follow this  
Rune

Help Condensing Shipper

Recommended Posts

Rune    1,150

So, basically I have a million characters. And I know next to nothing about coding.

 

What I'm after is an accordion style shipper in which I can condense my hoard down to boxes with their names that can be clicked and brought open with more information: Picture, personality, relationship, etc. Bonus points if I can colour coordinate/organize said boxes into groups.

 

Extra bonus points if its easy to copy/paste to add more characters. 

 

Any suggestions?

Share this post


Link to post
Share on other sites

Rune    1,150
49 minutes ago, Morrigan said:

Do you want something where the accordion is broken up with the categories (like header breaks) or something you can separate?

Categories would be excellent. 

Share this post


Link to post
Share on other sites

Morrigan    6,274

Here you go. Let me know of any changes like different fonts etc. The colors are defined at the element level so you can make them whatever you want per category per character:

  <link href="https://fonts.googleapis.com/css?family=Bangers|Barrio" rel="stylesheet"> 
  <style>

 /* Style the divs that are used to open and close the character panel */
div.character, div.category {
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    text-align: center;
    text-transform: uppercase;
    font-family: Bangers;
    font-size: 25px;
}
div.category {
  font-size: 30px;
  font-weight: 700;
  font-family: Barrio;
  }


/* Add a background color to the div if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
div.character.active, div.character:hover {
    background-color: #111;
}

/* Style the character panel. Note: hidden by default */
div.panel {
    padding: 0;
    background-color: #444;
    display: none;
	color: #CCC;
  width: 100%
}
div.char_panel {
    padding: 18px;
    background-color: #444;
    display: none;
	color: #CCC;
  width: 100%
}
.morrdisclaimer {
	font-size: 10px;
	text-align: right;
}
</style>
<script>
var acc = document.getElementsByClassName("character");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the div that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
} 

var acc = document.getElementsByClassName("category");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the div that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
} 
</script>

<div class="category" style="background: #a8679b; color: #FFF;">Category</div>
<div class="panel">
<div class="character" style="background: #4b0404; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #0b044b; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #ff1cd2; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div> 
</div>

<div class="category" style="background: #67a872; color: #FFF;">Category</div>
<div class="panel">
<div class="character" style="background: #4b0404; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #0b044b; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #ff1cd2; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
  </div> </div>
  <div class='morrdisclaimer'>Made by Morrigan of <a href="https://rpginitiative.com">RPG Initiative</a></div>

 

I'm going to likely release this as an Initiative code if that's cool with you dear.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.