title: Hidden toggled div is interfering with non-toggled links
body: <p>My page has toggled content that is preventing the other page content from being selectable or clickable. Is there a way to keep my general page layout the same, but still give users the ability to select the text and links within the "page-content" div?</p>
  
  <p>I can add a positive z-index value to that "page-content" div, which would appear to solve the problem, but of course that covers up the toggled content, defeating the purpose.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var x = document.getElementById("toggleDIV");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 600px;
    height: 350px;
    border: 2px solid gray;
    padding: 10px;
  }
  
  .page-content {
    position: absolute;
    width: inherit;
  }
  
  .toggle-wrapper {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    position: relative;
  }
  
  .button-1 {
    background-color: beige;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  
  #toggleDiv {
    width: 95%;
    height: 95%;
    width: 600px;
    height: 450px;
    margin: 0 auto;
    margin-top: 50px;
  }
  
  .link-box {
    border: 1px solid blue;
    width: 75%;
    height: 225px;
    margin-top: 100px;
    margin-left: 12.5%;
    box-sizing: border-box;
    text-align: center;
    background-color: beige;
  }
  
  .link-box a {
    width: 40%;
    margin-left: 7%;
    border: 1px solid black;
    text-align: center;
    float: left;
    height: 100px;
    margin-bottom: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="page-content"&gt;
      &lt;p&gt;The hidden toggled div is preventing you from selecting the text or clicking the link.&lt;/p&gt;
  
      &lt;p&gt;Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
        sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.&lt;/p&gt;
      &lt;a href="#"&gt;LINK&lt;/a&gt;
    &lt;/div&gt;
    &lt;!--page-content--&gt;
  
    &lt;div class="toggle-wrapper"&gt;
      &lt;button class="button-1" onclick="myFunction()"&gt;toggle&lt;/button&gt;
      &lt;div id="toggleDIV" style="display: none;"&gt;
        &lt;div class="link-box"&gt;
          &lt;p&gt;Toggle Content &lt;/p&gt;
          &lt;a href="#"&gt;
            &lt;p&gt;Link 1&lt;/p&gt;
          &lt;/a&gt;
          &lt;a href="#"&gt;
            &lt;p&gt;Link 2&lt;/p&gt;
          &lt;/a&gt;
          &lt;button onclick="myFunction()"&gt;Cancel&lt;/button&gt;
        &lt;/div&gt;
        &lt;!--link-box--&gt;
      &lt;/div&gt;
      &lt;!--#toggleDiv--&gt;
    &lt;/div&gt;
    &lt;!--toggle-wrapper--&gt;
  &lt;/div&gt;
  &lt;!--container--&gt;</code></pre>
  </div>
  </div>
  </p>