Help Condensing Shipper

[Rune 1,099]

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?

[Morrigan 1,826]

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

[Rune 1,099]

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. 

[Morrigan 1,826]

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.

[Rune 1,099]

Of course! You wrote it, do what you want with it!

 

Thank you!