Interior Decoration

by roomyrooms

HTML

<div id='interior_editor_tab_container'>
  <div class='interior_editor_tab'>
    <span class='interior_editor_tab_text'>
      House
    </span>
  </div>
  <div class='interior_editor_tab'>
    <span class='interior_editor_tab_text'>
      Guild
    </span>
  </div>
  <div class='interior_editor_dragx'></div>
  <div class='interior_editor_dragbar'></div>
</div>

<div id='interior_editor_container'>

  <span class='interior_editor_collapse'><span class='interior_editor_collapse_button collapsible_inactive'></span> General</span>
  <div class='interior_editor_rowset'>
    <div class='interior_editor_row'>
      <img class='interior_editor_item' src='https://i.gyazo.com/e70c529e4e5fd8f92d15700a3b05d45d.png'>
      <div class='interior_editor_item_text'>
        <span class='interior_editor_item_name'>Cabinet</span>
        <br>
        <span class='interior_editor_item_details'>10c (32x32)</span>
      </div>
    </div>

    <div class='interior_editor_row'>
      <img class='interior_editor_item' src='https://i.gyazo.com/b8a195ab1473f29be02a2277c128a8d2.png'>
      <div class='interior_editor_item_text'>
        <span class='interior_editor_item_name'>Urn</span>
        <br>
        <span class='interior_editor_item_details'>10c (32x32)</span>
      </div>
    </div>

    <div class='interior_editor_row'>
      <img class='interior_editor_item' src='https://i.gyazo.com/19fb80b7a8a2b7771e21e841110da032.png'>
      <div class='interior_editor_item_text'>
        <span class='interior_editor_item_name'>Large Urn</span>
        <br>
        <span class='interior_editor_item_details'>10c (32x64)</span>
      </div>
    </div>

    <div class='interior_editor_row'>
      <img class='interior_editor_item' src='https://i.gyazo.com/b8c856e6347e43fc95079ef97fed9792.png'>
      <div class='interior_editor_item_text'>
        <span class='interior_editor_item_name'>Wide Table</span>
        <br>
        <span class='interior_editor_item_details'>10c (64x32)</span>
     ...

CSS

#interior_editor_tab_container {
  padding-left: 4px;
  padding-top: 4px;
  user-select: none;
}


.interior_editor_tab {
  background-image: url('https://i.gyazo.com/0d947d27cd9d766c5a02bcd23c211fda.png');
  filter: brightness(0.7) grayscale(0.4);
  width: 48px;
  height: 32px;
  background-repeat: no-repeat;
  display: inline-block;
  text-align: center;
}
.interior_editor_tab.active {
  filter: none;
}
.interior_editor_tab_text {
  color: #eee;
  font-size: 14px;
  top: 20%;
  position: relative;
  text-shadow: 1px 1px #000;
}
.interior_editor_dragbar {
  display: inline-block;
  width: 77%;
  height: 18px;
  margin-top: 7px;
  float: right;
  background-image: url(https://i.gyazo.com/2a827a32d033bff17d943bc96075d885.png), url(https://i.gyazo.com/3e7d6cd4268f3b325f4d7005c76cb137.png), url(https://i.gyazo.com/f02e594ee137f1530095f5d49eb38670.png);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left bottom, right bottom, center bottom;
}
.interior_editor_dragx {
  width: 18px;
  height: 18px;
  margin-top: 7px;
  display: inline-block;
  float: right;
  background-image: url(https://i.gyazo.com/20c59f3e14c1b6ec673524772e2e7f14.png);
  background-repeat: no-repeat;
  background-position: center bottom;
}




#interior_editor_container {
  z-index: 1;
  position: relative;
  min-height: 300px;
  margin-top: -8px;
  border: 10px solid;
  border-image: url(https://i.gyazo.com/34a29fe2749b507b0ab6e8358baaf798.png) 10 round;
  background: #191919;
  border-radius: 5px;
  padding-left: 2px;
  user-select: none;
}


.interior_editor_collapse_button {
  min-width: 8px;
  display: inline-block;
  font-family: Georgia;
}
.interior_editor_collapse_button::after {
  content: '-';
  margin-left: 2px;
}
.collapsible_inactive::after {
  content: '+';
  margin-left: 0px;
}
.interior_editor_collapse {
  display: block;
  text-shadow: 1px 1px #000;
  font-size: 13px;
  font-style: italic;
  padding-top: 2px;
  cursor: pointer;
  color: #ddd;
  width:...

JavaScript

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

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
  	this.classList.toggle("active");
    for (var x = 0; x < coll.length; x++) {
    	if (coll[x] != this) {
 		 		coll[x].classList.remove("active");
      }
    }
  });
}
coll = document.getElementsByClassName("interior_editor_collapse");
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.firstElementChild.classList.toggle("collapsible_inactive");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
  coll[i].click()
}