title: href won't work when using frames and expandable lists
body: <p>I have a website that includes two frames. One on the left for Table of contents and one on the right. The table of contents on the left is an expandable list which I implemented using jquery. Each of the final children is a hyperlink for another html that will be opened in the frame on the right.</p>
  <p>The code for the left frame is as follows</p>
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Language&quot; content=&quot;en-us&quot;/&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;stylesheet/style.css&quot;/&gt;
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;title&gt;User Manual&lt;/title&gt;
  &lt;base target=&quot;mainFrame&quot;/&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h2&gt;Table of Contents&lt;/h2&gt;
  &lt;div class=&quot;listContainer&quot;&gt;
  &lt;ul class=&quot;expList&quot; id=&quot;expList&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;intro.html&quot;&gt;Introduction&lt;/a&gt;&lt;/li&gt;
          
          &lt;li&gt;Main Screen
            &lt;ul&gt;
              &lt;li&gt;
                &lt;a href=&quot;addInHouse.html&quot;&gt;Add In-House Client&lt;/a&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
            &lt;/li&gt;
           &lt;/ul&gt;
  &lt;/div&gt;
  &lt;script&gt;
  function prepareList() {
    $('#expList').find('li:has(ul)')
      .click( function(event) {
          if (this == event.target) {
              $(this).toggleClass('expanded');
              $(this).children('ul').toggle('medium');
          }
          return false;
      })
      .addClass('collapsed')
      .children('ul').hide();
    };
   
    $(document).ready( function() {
        prepareList();
    });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The code of the parent html that contains the two frames is as follows</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
     &lt;title&gt;User Manual&lt;/title&gt;
  &lt;head&gt;
  &lt;frameset border=&quot;10&quot; cols=&quot;20%,80%&quot; frameSpacing=&quot;10&quot;&gt;
  &lt;frame name=&quot;navFrame&quot; src=&quot;contents.html&quot;&gt;
  &lt;frame name=&quot;mainFrame&quot; src=&quot;main.html&quot;&gt;
  &lt;/frameset&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The issue that I am having is with the Add in house href. The introduction href when clicked works perfectly. While on the other hand when I click on add in house it does not open on the right frame. If I choose open in a new window it opens perfectly.
  Any thoughts?</p>
  <p>**EDIT
  To explain better what I am trying to do
  this <a href="http://ant.apache.org/manual/" rel="nofollow noreferrer">link</a> leads to apache ant user manual. I am trying to create a user manual for my application that works exactly the same way. The only difference between the two is that my table of contents is an expandable list while in the apache ant user manual click on a category reloads the table of contents with the contents of the category instead of expanding set category which is what I am trying to do. My issue is that the href links inside the inner list contents of the expandable lists do not actually work</p>
  <p>The base target code works as the mainFrame does not need to be in the same document of the contents html. It's inside the parent frame from which the left frame is running</p>