<p dir="auto">I'm trying to create an accordion based index that can be displayed as two columns.</p>
<p dir="auto">My efforts haven't been successful so far and the best I have managed is buggy:</p>
<p dir="auto"><a href="http://lcshn-demo.daddylonglegsdesign.com/" rel="nofollow">http://lcshn-demo.daddylonglegsdesign.com/</a></p>
<p dir="auto">(this example may not stay)</p>
<p dir="auto">The only example I have found that gets it to work is here:</p>
<p dir="auto"><a href="http://stackoverflow.com/questions/14024278/bootstrap-collapse-two-rows" rel="nofollow">http://stackoverflow.com/questions/14024278/bootstrap-collapse-two-rows</a></p>
<p dir="auto">But achieves it by duplicating the ID of the data parent.</p>
<p dir="auto">Is there a way round this?</p>
<p dir="auto">The accordion header links are small and easy to miss on mobile devices.<br>
It would be nice if the whole panel-heading area would be clickable …</p>
<p dir="auto">On solution could be to make the accordion links full width like so:</p>
<p dir="auto">In panels.less:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// Within heading, strip any `h*` tag of it's default margins for spacing.
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: ceil((@font-size-base * 1.125));
  &gt; a {
    display: block;
    width: 100%
    color: inherit;
  }
}"><pre class="notranslate"><code class="notranslate">// Within heading, strip any `h*` tag of it's default margins for spacing.
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: ceil((@font-size-base * 1.125));
  &gt; a {
    display: block;
    width: 100%
    color: inherit;
  }
}
</code></pre></div>