link to test site

So, I was looking around on other sites and saw some really cool guidebooks that were custom html webpages. Thought; that's dope. I wanna make one for my site. Found a tutorial from RPG-I, followed it to the best of my ability, even looked at other similar codes to see how they went about it, especially with regard to how keys and things worked.

Anyways; Three weeks of agonizing struggle and I managed to get it mostly working. Except for one issue. When the webpage first loads it doesn't show anything, like none of the tabs. What I would like it to do, is automatically display the content in the PREMISE + ABOUT tab when the webpage first loads. Now I have no idea how to preform such a thing, there was a following up post on the tutorial that I tried to follow and it didn't work, I also tried changing the CSS, specifically this part:


#article_container .articles { display: none }

But all that nets me is all the content showing instead of just the content from the PREMISE + ABOUT tab. Below is both the code on the webpage, and the CSS. (Webpage 1st, CSS second) Any assistance would be amazing.

--------------------------------------------------------

Code: HTML and Script
<div id="welcome_articles"><h1>SHADOWS OF OUR YOUTH GUIDEBOOK</h1></div>

<div id="article_container">
<aside>
      <ul class="article_container_list">
     <h3>BASICS</h3>
     <li><a class="container_links" href="#" data-showdiv="article_1">PREMISE + ABOUT</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_2">SETTING</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_3">PLOT</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_4">RULES</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_5">HOW POWERS WORK</a></li>
   </ul><br><br>
         <ul class="article_container_list">
     <h3>CHARACTER CLASSES</h3>
     <li><a class="container_links" href="#" data-showdiv="article_6">AKASHIC + MAGIC</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_7">ESPER + PSIONICS</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_8">AESIR + AURA</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_9">VANIR + TRAITS</a></li>
   </ul><br><br>
         <ul class="article_container_list">
     <h3>SCHOOL INFORMATION</h3>
     <li><a class="container_links" href="#" data-showdiv="article_10">ABOUT THE SCHOOL</a></li>      
     <li><a class="container_links" href="#" data-showdiv="article_11">SEMESTERS, BREAKS, HOLIDAYS</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_12">CLASSES AND CLUBS</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_13">UNIFORMS, DORMS, CURFEWS</a></li>
     <li><a class="container_links" href="#" data-showdiv="article_14">OTHER POWER SCHOOLS, TRANSFERING</a></li>
   </ul><br><br>
  </aside>
 <div class="article_content">
  <% premise %>  
  <% setting %>  
  <% plot %>
  <% powers %>
  <% rules %>  
  <% akashic %>  
  <% espers %>  
  <% aesir %>  
  <% vanir %>  
  <% school %>  
  <% years %>  
  <% classes %>  
  <% policies %>  
  <% transfers %>  
  </div>
</div>


<script>
$(".container_links").click(function(){
   $(".articles:visible").hide();
   $("#"+$(this).attr("data-showdiv")).show();
});
 
$('.container_links').click( function(){
   if ( $(this).hasClass('active') ) {
       $(this).removeClass('active');
   } else {
       $('.container_links.active').removeClass('active');
       $(this).addClass('active');    
   }
});
 
 // following is purely to prevent page jump when user clicks on link
 $('a.container_links').click(function(e){
   e.preventDefault();
 });
</script>


Code: CSS
/****************
GUIDEBOOK WEBPAGE
****************/


#welcome_articles {
margin-bottom: 10px;
padding: 5px;
border-bottom: 1px solid rgba(0,0,0, .1);
}


#article_container { display: flex }

#article_container .article_content {
flex-grow: 2;
padding: 0 20px 20px;
border-left: 1px solid rgba(0,0,0, .1)
}

#article_container aside {
padding: 10px;
min-width: 30%
}

#article_container .articles { display: none }

ul.article_container_list {
list-style-type: none;
margin: 0;
padding: 0
}

ul.article_container_list li {
display: block;
margin: 1px;
}

a.container_links {
display: block;
border-bottom: 1px solid rgba(0,0,0, .1);
padding: 5px
}

a.container_links.active { padding-left: 15px }

ul.article_container_list h3 { margin-top: 0 }

@media screen and (max-width: 979px) {
body { font-size: 1rem }
#wrapper { width: calc(100% - 20px); margin: 0 auto; }
#article_container { display: block; }
ul.article_container_list { text-align: center }
#userlinks { width: 90% }
ul.article_container_list li { margin-bottom: 10px }
ul.article_container_list li:last-child { margin-bottom: 0 }
}