[Question] How do i implement collapsible lists to my wikia?

<div class="mw-collapsible mw-collapsed">
* List item one
* List item two
* List item three
</div>

Is that something like what you need?

More details at Help:Collapsing.

If you were trying to collapse the lists at c:eurion:First_Age, I went ahead and did it for you. Feel free to remove that if it's not what you intended.

Thanks all for the answers but unfortunately I'm still having problems.

And this is what I need: https://i.gyazo.com/fde50af6b23399380f4d973b8fe44d00.png

Upon clicking show that a text or a list or whatever pops open.

Can you link to the template and test page? It should be working.

Also, use nowiki tags when attempting to display HTML/MediaWiki markup.

I just found out why it didn't work. When pressing preview I just got a box with the text that was supposed to be inside the collapsible box but when saved the expand button appears and I can expand my lists ^.^

But now I have another quick question: is it possible to get rid of the box as you can see here: https://gyazo.com/2740e23f74ddabc29525cf51260279fc

and get something more similar to this: https://i.gyazo.com/fde50af6b23399380f4d973b8fe44d00.png

Portable Infobox have a collapse function you might want to use

<infobox theme="conflict">
  <title source="title1">
    <default>{{PAGENAME}}</default>
  </title>
  <image source="image1">
    <caption source="caption1"/></image>
  <data source="date">
    <label>Date</label></data>
  <data source="location">
    <label>Location</label></data>
  <data source="result">
    <label>Result</label></data>

<group>
<header>Belligerents</header>
  <group collapse="closed">
     <header>Belligerent A</header>
     <data source="belligerent_a"></data>
  </group>
  <group collapse="closed">
     <header>Belligerent B</header>
     <data source="belligerent_b"></data>
  </group>
  <group collapse="closed">
     <header>Belligerent C</header>
     <data source="belligerent_c"></data>
  </group>
</group>

  <group>
    <header>Casualties and losses</header>
    <data source="military_lives">
      <label>Military lives</label></data>
    <data source="civilian_lives">
      <label>Civilian lives</label></data>
    <data source="materialistic_damage">
      <label>Materialistic damage</label>
    </data>
  </group>
</infobox>

If you want to flip the dark blue collapse to light blue, add this in w:c:eurion:MediaWiki:Common.css

.portable-infobox.pi-theme-conflict .pi-collapse .pi-header { background-color: #e6ebee; color:#3a3a3a; font-size: 12px; }
.portable-infobox.pi-theme-conflict .pi-collapse .pi-header::after { border-color:#3a3a3a; }

Yes, you can get rid of the box. But to do that, you need to use CSS. To help you with that, I would need to be able to inspect the test page.

Is this what you need?

http://eurion.wikia.com/wiki/TEST

You are getting the box because of this section in your wiki's CSS. It looks like this is from something else that got copied/adapted from another wiki. Note that other aspect besides the box are also affected.

/* Standard Navigationsleisten, aka box hiding thingy
   from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.mw-collapsible,
div.NavFrame {
    margin: 0;
    padding: 4px;
    border: 1px solid #aaa;
    text-align: center;
    border-collapse: collapse;
    font-size: 95%;
}
div.mw-collapsible + div.mw-collapsible,
div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;
}
div.NavPic {
    background-color: #fff;
    margin: 0;
    padding: 2px;
    /* @noflip */
    float: left;
}
div.mw-collapsible div.NavHead,
div.NavFrame div.NavHead {
    height: 1.6em;
    font-weight: bold;
    background-color: #ccf;
    position: relative;
}
div.mw-collapsible p,
div.mw-collapsible div.NavContent,
div.mw-collapsible div.NavContent p,
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
    font-size: 100%;
}
div.NavEnd {
    margin: 0;
    padding: 0;
    line-height: 1px;
    clear: both;
}
a.NavToggle {
    position: absolute;
    top: 0;
    /* @noflip */
    right: 3px;
    font-weight: normal;
    font-size: 90%;
}

The particular rules you need to be concerned about are the following.

div.mw-collapsible,
div.NavFrame {
    margin: 0;
    padding: 4px;
    border: 1px solid #aaa;
    text-align: center;
    border-collapse: collapse;
    font-size: 95%;
}
div.mw-collapsible + div.mw-collapsible,
div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;
}
div.mw-collapsible p,
div.mw-collapsible div.NavContent,
div.mw-collapsible div.NavContent p,
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
    font-size: 100%;
}

In order to fix this, you will need to use an additional class in your collapsible lists. For example:

<div class="mw-collapsible mw-collapsed collapsible-list">
</div>

Then, in your wiki's CSS:

div.mw-collapsible.collapsible-list {
desired css if any
}
div.mw-collapsible + div.mw-collapsible.collapsible-list {
desired css if any
}
div.mw-collapsible.collapsible-list p {
desired css if any
}