Search code examples
htmlcssuikit

URL linking to collapsible element's child link?

I have a group of accordion cards that collapse on my page, and an example of one is:

 <div class="card" style="display:none" >
<div class="card-header" role="tab" id="mainHeading">
  <h5 class="mb-0">
    <a class="collapsed" data-toggle="collapse" href="#linkTarget" aria-expanded="false" aria-controls="linkTarget">
    </a>
  </h5>
</div>
<div id="linkTarget" class="collapse" role="tabpanel" aria-labelledby="mainHeading" data-parent="#accordion">
  <div class="card-body">
    <a id="fileLink" href="https://downloads/testFile.pdf" download="filename">Test File</a>
  </div>
</div>


<script type="text/javascript">
 if(window.location.href == "/FAQ/fileLink") {
     document.getElementById('fileLink').click()
 }
</script>

I currently have it hidden because I don't want it showing but I do want to be able to give someone a URL like 

www.testSite/FAQ#linkTarget/filename

or something like that so that if I give someone the link and they click it or go to it, it acts exactly the same as if they collapsed it and clicked on the download link.

Is there a way I can do that

Solution

  • Yes, you can test the window href before any javascript code

     if(window.location.href == "www.testSite/FAQ#linkTarget/filename") {
     document.getElementsByClassName('CLASS').click();
   }

    Change the url to be the one you wanted, and change "CLASS" as the class of the element you want to click when it's the chosen url