Gear Hides Test

<a href="https://ohwikiguide.com">Return to Front Page</a>

<style>

/* TABS */ .mw-tab-buttons {

 display: flex;
 gap: 6px;
 margin-bottom: 10px;

}

.mw-tab-btn {

 flex: 1;
 text-align: center;
 padding: 8px 0;
 background: #11161c;
 border: 1px solid #1f2a35;
 border-radius: 6px;
 color: #cfd6df;
 cursor: pointer;
 font-weight: 600;

}

.mw-tab-btn.active {

 background: #1ec8ff;
 color: #001018;

}

/* CONTENT */ .mw-tab-content {

 display: none;

}

.mw-tab-content.active {

 display: block;

}

/* UI BLOCK */ .mw-ui-select {

 width: 100%;
 padding: 10px;
 background: #11161c;
 color: #e6edf3;
 border: 1px solid #1f2a35;
 border-radius: 6px;

}

/* OUTPUT */ .mw-ui-output {

 margin-top: 10px;
 background: #0d1319;
 border: 1px solid #1f2a35;
 border-radius: 10px;
 padding: 12px;

}

.mw-ui-title {

 font-weight: 700;
 margin-bottom: 8px;

}

.mw-ui-line {

 padding: 6px 0;
 border-top: 1px solid #1a222b;

}

.mw-ui-line:first-of-type {

 border-top: none;

}

</style>

Helmet

Top

Bottoms

Gloves

Boots

Mask

 <select class="mw-ui-select">
   <option>Select Helmet</option>
 </select>

 <select class="mw-ui-select">
   <option>Select Top</option>
 </select>

 <select class="mw-ui-select">
   <option>Select Bottoms</option>
 </select>

 <select class="mw-ui-select">
   <option>Select Gloves</option>
 </select>

 <select class="mw-ui-select">
   <option>Select Boots</option>
 </select>

 <select class="mw-ui-select">
   <option>Select Mask</option>
 </select>

<script>

/* TAB SYSTEM */ document.querySelectorAll('.mw-tab-btn').forEach(btn => {

 btn.onclick = () => {

   document.querySelectorAll('.mw-tab-btn').forEach(b => b.classList.remove('active'));
   document.querySelectorAll('.mw-tab-content').forEach(c => c.classList.remove('active'));

   btn.classList.add('active');
   document.getElementById(btn.dataset.tab).classList.add('active');
 };

});

</script>