title: Accordion open page and expand when clicking parent
body: <p>I have an accordion menu with which I am trying to accomplish the following:</p>
  
  <p>When clicking on a parent, a submenu appears AND opens a site I am specifying.
  Upon clicking a submenu-item, this page loads and sublist stays expanded</p>
  
  <p>I have accomplished the latter, however I am unsure how to go about to make the accordion parent node open a new site.</p>
  
  <p>The code is as follows:</p>
  
  <pre><code>&lt;div class="accordion" id="menu""&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a data-parent="#menu" href="@Url.Action("Index", "Home", new { area = ""})"&gt;&amp;nbsp;Home
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#menu" href="#ServiceSublist" &gt;&amp;nbsp;Services
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="ServiceSublist" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;@Html.ActionLink("Service 1", "Service1", "Services", new { area = "" }, new { })&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Service 2", "Service2", "Services", new { area = "" }, new { })&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And jQuery:    </p>
  
  <pre><code>$(document).ready(function () {
      $('#menu ul li').click(function (e) {
          if ($(this).attr('class') != 'active') {
              $('#menu ul li a').removeClass('active');
              $(this).addClass('active');
  
          }
      });
  
      $('a').filter(function () {
          return this.href === document.location.href;
      }).addClass('active')
  
      $(function () {
          var arr = window.location.pathname.split("/");
          $(arr).each(function () {
  
              if (this == "Services") {
                  $('#ServiceSublist').collapse('show');
              }
  
  
          })
  
      });
  });
  </code></pre>
  
  <p>The problem lies here (I believe)</p>
  
  <pre><code>&lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#menu" href="#ServiceSublist" &gt;&amp;nbsp;Services&lt;/a&gt;
  </code></pre>
  
  <p>as the href points to #ServiceSublist which it needs to. How can I also make that line open a new window? I have tried using onclick="", however this really messed up the menu and added the entity TO the menu (which I do not want.. I just want to open the page and keep sublist expanded).</p>
  
  <p><b>Note:</b> The source here is a modified version of what I am using, but the general idea is the same</p>