SharePoint XSLT with dual filter (JS tabs or tab and accordion) on document library

Question

Hi, I have a document library that i'm using XSLT to display in a nicer way for our users on a SharePoint intranet page. I currently have java tabs to allow users to filter the content by 'owning function', I now need to add a secondary level of filtering to this list which will allow users to filter the documents shown by 'owning function' and by 'document type'. I couldn't fathom the java required for a second level of tabs so succumbed to the secondary level filter to be accordions BUT it is showing each document inside it's own accordion panel (5 'template' accordion panels with 1 document in each not all template documents within the template accordion panel. My preferred method would be to have the dual set of tabs but if this isn't possible / someone can point me in the right direction for the accordion items to all be under one accordion panel per document type then that would be great too :) Below is an example of my document library.

What I currently get is: Tabs of owning functions down the left which work to filter the documents but the accordions will show for example under PM as: Template Doc A Template Doc B Other Doc E With the desired outcome to be something like this: If PM is chosen it will filter the list to show Doc A, B and E ... then if Template is selected, only Doc A and B will be shown. OR via tab and accordion method: PM selected and it will show 2 accordion panels 'Template' and 'Other' under 'Template' it will show Doc A and B. Apologies for the perhaps untidy formatting of the code XSLT

			<div class="contentBlock" id="faqs">
			<h3>Functional Library</h3>
			<ul class="tabButtons">
			<xsl:for-each select="$Rows[generate-id(.)=generate-id(key('Grouping',@OwningFunction))]/@OwningFunction">
			<xsl:sort select="." />
			<xsl:variable name="catID" select="position()" />
				<li onclick="openTab(event,'tb-{$catID}')">
					<xsl:attribute name="class">
						<xsl:choose>
							<xsl:when test="$catID = 1">btn-<xsl:value-of select="$catID"/> tablink active</xsl:when>
							<xsl:otherwise>btn-<xsl:value-of select="$catID"/> tablink</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>	
				<xsl:value-of select="."/></li>
			</xsl:for-each>
			</ul>
			
			<xsl:for-each select="$Rows[generate-id(.) = generate-id(key('Grouping',@OwningFunction))]/@OwningFunction">
			<xsl:variable name="catID" select="position()" />
			<div class="accBars2">
					<div class="tab" id="tb-{$catID}">
					<xsl:attribute name="style">
						<xsl:choose>
							<xsl:when test="$catID = 1">display:block;</xsl:when>
							<xsl:otherwise>display:none;</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>

					<xsl:call-template name="Docs" />

					</div>
				</div>
				</xsl:for-each>

				</div>
			</xsl:otherwise>
		</xsl:choose>


	<xsl:template name="Docs">
   <!-- Accordion + Panel -->
                    <xsl:variable name="DocType">
						<xsl:value-of select="@DocumentType" />
					</xsl:variable>	

					<xsl:for-each select="key('Grouping', .)">
  

						<h4 class="accordion"><xsl:value-of select="@DocumentType"/></h4>
						<div class="panel">
                    <!-- Create doc link with icon -->
                    <xsl:variable name="DocLink">
						<xsl:value-of select="concat('/intranet/Documents/', @FileLeafRef)" />
					</xsl:variable>			
					<xsl:variable name="DocIcon">
						<xsl:value-of select="concat('/intranet/_layouts/15/images/', @HTML_x0020_File_x0020_Type.File_x0020_Type.mapico)" />
					</xsl:variable>
					<ul>
                        <li class="docList">
                            <a href="{$DocLink}" target="_blank"><img src="{$DocIcon}" title="{@Title}" />&#160;<xsl:value-of select="@Title" disable-output-escaping="yes" /></a>
                        </li>
                    </ul>
						<!-- END -->
                        </div>
					</xsl:for-each>
                <!-- END -->
	</xsl:template>

		<!-- Accordion -->
			var acc = document.getElementsByClassName('accordion');
				var i;
				
				for (i = 0; i &lt; acc.length; i++) {
				  acc[i].addEventListener('click', function() {
				    this.classList.toggle('active');
				    var panel = this.nextElementSibling;
				    if (panel.style.maxHeight) {
				      panel.style.maxHeight = null;
				    } else {
				      panel.style.maxHeight = panel.scrollHeight + 'px';
				    } 
				  });
				}
			<!-- END  -->

			<!-- Tabs -->
			function openTab(evt, n) {
			  var i, x, tablinks;
			  x = document.getElementsByClassName("tab");
			  for (i = 0; i &lt; x.length; i++) {
			    x[i].style.display = "none";
			  }
			  tablinks = document.getElementsByClassName("tablink");
			  for (i = 0; i &lt; x.length; i++) {
			    tablinks[i].className = tablinks[i].className.replace(" active", "");
			  }
			  document.getElementById(n).style.display = "block";
			  evt.currentTarget.className += " active";
			}
			<!-- END  -->