Craft Recipes

by roomyrooms

HTML

<div class='recipe_box'>

  <div class='recipe_box_interior'>

    <div class='recipe_scroll'>
    
      <div class='recipe_collapsible'>
        Blacksmithing
      </div>
      
      <div class='recipe_container'>
        <div class='recipe_text owned'>
          Mundane Axe
        </div>
        <div class='recipe_text'>
          Uncommon Axe
        </div>
        <div class='recipe_text'>
          Rare Axe
        </div>
      </div>
      
      <div class='recipe_collapsible'>
        Alchemy
      </div>
      
      <div class='recipe_container'>
        <div class='recipe_text owned'>
          Basic Health Potion
        </div>
        <div class='recipe_text'>
          Intermediate Health Potion
        </div>
        <div class='recipe_text'>
          Expert Health Potion
        </div>
      </div>
      
    </div>

  </div>

</div>

CSS

.recipe_box {
  width: 400px;
  height: 300px;
  padding: 60px;
  font-size: 18px;
  outline: none;
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 0px;
  font-family: Constantia;
}

.recipe_box_interior {
  text-align: start;
  outline: none;
}

.recipe_scroll {
  border: 10px solid;
  border-image: url(https://i.imgur.com/0jV07KB.png) 10 round;
  background: #302b37;
  border-radius: 5px;
  width: 55%;
  height: 280px;
  position: relative;
  top: -16px;
  left: -16px;
  float: left;
  overflow: auto;
}


.recipe_collapsible {
  color: #dba808;
  user-select: none;
  text-shadow: 1px 1px #000;
  font-size: 16px;
}
.collapsible_active {
  color: #ccc;
}
.recipe_collapsible:hover {
  color: #fff;
  background-color: #444;
}


.recipe_container {
  display: none;
  overflow: hidden;
  margin-left: 6px;
}


.recipe_text {
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  color: #777;
  text-shadow: 1px 1px #000;
}
.recipe_text:hover {
  color: #aaa;
  background-color: #444;
  background-size: 100px;
}

.owned {
  color: #ccc;
}
.owned:hover {
  color: #fff;
  background-color: #444;
}

JavaScript

var coll = document.getElementsByClassName("recipe_collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("collapsible_active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}