<!-- you shouldn't need this bit -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<!-- end thing you shouldn't need -->

<link href="https://fonts.googleapis.com/css?family=Princess+Sofia&display=swap" rel="stylesheet">

<div id="thearticles">
  <div class="articles_header">
    <h1>Guidebook</h1>
    Lorem Ipsum here
  </div>
  <aside>
    <ul class="article_container_list">
      <h3>Lore Index</h3>
      <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li>
      <li><a class="container_links" href="#" data-showdiv="article_2">Link 2</a></li>
    </ul>
  </aside>
  <div class="article_content">
    <div id="article_1" class='articles' style="display: block">
      <!-- JCINK users, use webpage keys https://rpginitiative.com/guides/coding/a-guidebook-for-jcink-r195/ -->
      One Lorem ipsum
    </div>
    <div id="article_2" class='articles'>
      Two Lorem Ipsum
    </div>
  </div>
  <div class="article_footer">
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </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');    
    }
});

$('a.container_links').click(function(e)
{
    e.preventDefault();
});
</script>

<style>

#thearticles {
  font: 14px sans-serif
}

#thearticles .articles {
  position: relative;
  display: none
}

.articles_header {
  color: #5f4102;
  background: #fbb829;
  padding: 1%;
  grid-area: article-header
}

.articles_header h1 {
  font: 3rem 'Princess Sofia', cursive;
  margin: 0;
  padding: 0
}

#thearticles aside {
  color: #5f4102;
  padding: 20px;
  background: #ffe545;
  border-right: 2px solid #fbb829;
  grid-area: article-sidebar
}

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

.article_container_list a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 5px 0;
  margin-top: 3px;
  border-bottom: 1px dotted #5f4102
}

.article_container_list a:hover,
a.container_links.active {
  border-bottom-style: solid
}

a.container_links.active {
  font-weight: 700
}

.article_container_list h3 {
  font: 2rem;
  margin: 0;
  padding: 0
}

.article_content {
  padding: 1%;
  color: #000;
  grid-area: article-content
}

.article_footer {
  border-top: 2px solid rgba(0,0,0, .2);
  padding-bottom: 1px;
  text-align: center;
  background: #026374;
  grid-area: article-footer
}

.article_footer ul li {
  display: inline-block
}

.article_footer ul li:last-child {
  border: 0
}

.article_footer ul li a {
  color: white;
  text-decoration: none;
  text-shadow: 0 0 5px rgba(0,0,0, 1);
  border-radius: 3px;
  text-transform: uppercase;
  display: block;
  padding: 15px
}

.article_footer ul li a:hover {
  box-shadow: inset 0 0 5px rgba(0,0,0, .7)
}

#thearticles {
  background: #ffee84;
  display: grid;
  grid-template-columns: 15% 1fr 1fr;
  grid-template-areas:
    "article-header article-header article-header"
    "article-sidebar article-content article-content"
    "article-footer article-footer article-footer"
}

@media screen and (max-width: 767px) {
  #thearticles { display: block }
  #thearticles aside { border-right: 0 }
}
</style>