How to un-'hide' Child Elements under Footer Section in the Sidebar

Author: jerrensCreated Nov 18, 2022Updated Oct 18, 2023

I initially commented on https://github.com/apidoc/apidoc/issues/1170#issuecomment-1319310302 and this is also related to https://github.com/apidoc/apidoc/issues/321, but I felt this might be better tracked as a separate issue since 321 is closed and what I've found (described below) isn't directly related to 1170.

If I have my footer.md as

markdown

# Best Practices

## Additional Information

Then the code gets rendered as:

xml

<div id="sidenav" class="span2">
<nav id="scrollingNav">
  <div class="sidenav-search">
    <input class="form-control search" data-action="filter-search" type="text" placeholder="Filter...">
    <span class="search-reset">x</span>
  </div>
  <ul class="sidenav nav nav-list list">
          <li class="nav-fixed nav-header navbar-btn nav-list-item" data-group="_header"><a href="#api-_header" data-name="show-api-_header" class="show-api api-_header-init">Introduction</a></li>
          <li class="nav-header nav-list-item" data-group="ConvertTo"><a href="#api-ConvertTo" data-group="show-api-ConvertTo" class="show-group api-ConvertTo-init">ConvertTo</a></li>
        <!-- Removed most li elements -->
          <li class="nav-fixed nav-header navbar-btn nav-list-item active" data-group="_footer"><a href="#api-_footer" data-name="show-api-_footer" class="show-api api-_footer-init">Best Practices</a></li>
  </ul>
</nav>
</div>

But when I change my footer.md to be:

markdown

# Best Practices

## <span id="api-_footer-additional-information">Additional Information</span>

To try and get

It gets rendered as:

xml

<div id="sidenav" class="span2">
<nav id="scrollingNav">
  <div class="sidenav-search">
    <input class="form-control search" data-action="filter-search" type="text" placeholder="Filter...">
    <span class="search-reset">x</span>
  </div>
  <ul class="sidenav nav nav-list list">
          <li class="nav-fixed nav-header navbar-btn nav-list-item" data-group="_header"><a href="#api-_header" data-name="show-api-_header" class="show-api api-_header-init">Introduction</a></li>
          <li class="nav-header nav-list-item" data-group="ConvertTo"><a href="#api-ConvertTo" data-group="show-api-ConvertTo" class="show-group api-ConvertTo-init">ConvertTo</a></li>
        <!-- Removed most li elements -->
          <li class="nav-fixed nav-header navbar-btn nav-list-item active" data-group="_footer"><a href="#api-_footer" data-name="show-api-_footer" class="show-api api-_footer-init">Best Practices</a></li>
		<!-- New li element appears, but has the class 'hide'.  If I manually remove that class in the browser dev tools, it appears -->
        <li class="hide" data-group="_footer" data-name="additional-information" data-version="1.0">
          <a href="#api-_footer-additional-information" title="" data-group="show-api-_footer" data-name="show-api-_footer-additional-information" class="nav-list-item show-api api-_footer-additional-information-init">Additional Information<div class="nav-list-url-item hide"></div></a>
        </li>
  </ul>
</nav>
</div>

In that HTML code snippet, I added a comment above the new <li> element that was added because of the <span>. I just need to know how to get rid of the class="hide" attribute on that last element. Manually removing it using the browser dev tools enables the features I'm after.

Source: apidoc/apidoc

View original on GitHub View discussion on GitHub