javascript - JS Toggle hides ALL toggled divs -- makes page non-functioning

Question

Sorry if this is a silly question, I'm very new to JS/JQuery and don't know if there's a simple answer to my problem.

I have two toggling divs set up more or less like the following (this is the stripped-down version):

<div id="top-story-panel">
  <div id="story-toggle">
    <ul>
      <li id="top-stories">
        <a href="#" class="current-link">Top Stories</a>  
      </li>
      <li id="toc">
        <a href="#">All Stories</a>
      </li>
    </ul>  
  </div> 
</div>

<div id="toc-panel">
  <div id="story-toggle">
    <ul>
      <li id="top-stories">
        <a href="#" class="current-link">Top Stories</a>  
      </li>
      <li id="toc">
        <a href="#">All Stories</a>
      </li>
    </ul>  
  </div>
</div>

With this function, the two divs toggle back and forth without a hitch, but if you click on one of the toggles ("top stories"/"all stories", respectively) and then click it AGAIN it hides the div it just showed and... can't find anything else to replace it with. Both divs are hidden now and there's no way for the user to interact with either div.

jQuery(function($) {
var $contentPanel= $('#top-stories-panel, #toc-panel')
    $toggle= $("#top-stories, #toc");

$toggle.on('click', function(e) {
    var $id;
    e.preventDefault();
    $icons.removeClass('hidden');
    $id=$('#'+this.id+'-panel'); //get menu id 
    $contentPanel.fadeOut(10);
    if(! $id.is(':visible')) {
        $id.fadeIn(450)
            preloadImages: 'all';
        $(this).addClass('hidden');
    }
    });
});

I'm assuming that if I place the toggles outside of their respective divs, I won't have this problem -- but is there a code workaround for the toggle to stay within the div?

Thanks so much for all of your help ;_;