Javascript: link to anchor in hidden container

I have links in a container with anchors in another container hidden by default.
When both container are showing, the link works without problem, but when the "Anchors" container is hidden, the link does not work.

What I would like to do : on the click of the link, show the relative container and go to the line of the anchor.

Here is what I did, without much success (also as a Fiddle):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $(".toggle > *").hide();
  $(".toggle .header").show();
  $(".toggle .header").click(function() {
    $(this).parent().children().not(".header, .wy-table-responsive").toggle(400);
    $(this).parent().children(".wy-table-responsive").children().toggle(400);
    $(this).parent().children(".header").toggleClass("open");
    $(this).parent().children(".wy-table-responsive").toggleClass("open");
  });

  // Add click event listeners to links with href pointing to anchors in hidden section
  $("a[href^='#']").click(function(event) {
    event.preventDefault(); // Prevent default behavior of link
    var targetId = $(this).attr("href").substring(1); // Get the id of the target anchor
    $(document.location.targetId).slideDown().prev().addClass('active');
  });
});

<!-- language: lang-css -->

.toggle .header {
  display: block;
  clear: both;
}

.toggle .header p:before {
  content: " ▶ ";
}

.toggle .header.open p:before {
  content: " ▼ ";
}

<!-- language: lang-html -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="toggle docutils container">
  <div class="header docutils container">
    <p><strong>Keywords</strong></p>
  </div>
  <pre class="literal-block">
<a class="reference internal" href="#ref1"><span class="std std-ref">ref1</span></a> value = 1
<a class="reference internal" href="#ref2"><span class="std std-ref">is_planar</span></a>  value= 2
</pre>
</div>

<div class="toggle docutils container">
  <div class="header docutils container">
    <p><strong>Anchors</strong></p>
  </div>
  <p id="ref1">ref1 anchor
    <p id="ref2">ref2 anchor
</div>

<!-- end snippet -->

Looks like there were a couple of relatively-minor problems:

1. You were removing the # from targetId, but if you're going to use it with $() to look something up by ID, you need that as it's what indicates an ID selector.
2. $(document.location.targetId) looks for a property called targetId on document.location, then uses its value as the argument to $. I think you wanted to just use the targetId variable you'd just created and filled in.
3. You weren't actually scrolling to anything, just sliding it down.

I've fixed that below by not stripping the #, just using $(targetId) to get the element, and using the completion callback for slideDown to scroll the target into view (using the built-in "smooth" animation):

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $(".toggle > *").hide();
  $(".toggle .header").show();
  $(".toggle .header").click(function() {
    $(this).parent().children().not(".header, .wy-table-responsive").toggle(400);
    $(this).parent().children(".wy-table-responsive").children().toggle(400);
    $(this).parent().children(".header").toggleClass("open");
    $(this).parent().children(".wy-table-responsive").toggleClass("open");
  });

  // Add click event listeners to links with href pointing to anchors in hidden section
  $("a[href^='#']").click(function(event) {
    event.preventDefault(); // Prevent default behavior of link
    var targetId = $(this).attr("href"); // Get the id of the target anchor
    var target = $(targetId);
    target
      .slideDown(() => {
        target[0].scrollIntoView({ behavior: "smooth" });
      })
      .prev()
      .addClass('active');
  });
});

<!-- language: lang-css -->

.toggle .header {
  display: block;
  clear: both;
}

.toggle .header p:before {
  content: " ▶ ";
}

.toggle .header.open p:before {
  content: " ▼ ";
}

<!-- language: lang-html -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="toggle docutils container">
  <div class="header docutils container">
    <p><strong>Keywords</strong></p>
  </div>
  <pre class="literal-block">
<a class="reference internal" href="#ref1"><span class="std std-ref">ref1</span></a> value = 1
<a class="reference internal" href="#ref2"><span class="std std-ref">is_planar</span></a>  value= 2
</pre>
</div>

<div style="height: 50em">A bunch of space so we can see scrolling</div>

<div class="toggle docutils container">
  <div class="header docutils container">
    <p><strong>Anchors</strong></p>
  </div>
  <p id="ref1">ref1 anchor</p>
  <p id="ref2">ref2 anchor</p>
</div>

<!-- end snippet -->

I also inserted an element between them so we could see the scrolling.

(Also, you weren't closing your paragraphs tags. I realize you don't have to much of the time, but it messes with formatters [and with the minds of other people reading your code], I suggest doing it. I've done it above.)