How to expand a collapsible item from link within another collapsible item [js]?

I'm making a list of collapsible items that can make calls to itself to scroll to and expand other items on the fly. Shooting for this...

Before selecting the hyperlink. enter image description here

After selecting. enter image description here

How can I get the First collapsed item to expand when the link to it in the Third item's paragraph is selected?

What I got: If the example above had more collapsed items, then the code below would scroll the webpage to the desired collapsible item (half the solution).

<!DOCTYPE html>
<html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    <div>
        <ul class="collapsible" data-collapsible="accordion">
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><a name="987"/>First</a></div>
              <div class="collapsible-body"><p>Hello StackOverflow! SO's da' bomb diggidy!</p></div>
            </li>
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
              <div class="collapsible-body"><p>Why is the person who invests your money called a broker?</p></div>
            </li>
            <li>
              <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
              <div class="collapsible-body"><p>I'd like to <a href="#987">open the First collapsible element</a> in this list.</p></div>
            </li>
        </ul>
    </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Solution

I would just trigger click event on first .collapsible-header item, with slightly changed html code for the anchor:

$('[data-click]').on('click', function (e) {
    $( $(this).data('click') ).trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>

<div>
    <ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>First</div>
            <div class="collapsible-body">
                <p>Hello StackOverflow! SO's da' bomb diggidy!</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
            <div class="collapsible-body">
                <p>Why is the person who invests your money called a broker?</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
            <div class="collapsible-body">
                <p>I'd like to <a href="#" data-click=".collapsible .collapsible-header:first">open the First collapsible element</a> in this list.</p>
            </div>
        </li>
    </ul>
</div>

Same code is also on Fiddle.

If you wish to target n-th element, than you can use jQuery :eq() selector (zero based). For example, to target 3rd item you would use '.collapsible-header:eq(2)' selector.

If you care about the SEO (and you should), than your links should have correct href. In this case add unique IDs to .collapsible_header elements and use slightly different script to exploit it:

$('[data-click]').on('click', function (e) {
    $( $(this).attr('href') ).trigger('click');
});

where the target item is:

<div id="about_stackoverflow" class="collapsible-header">

and the valid local link is:

<a href="#about_stackoverflow" title="Click to open first item" data-click="true">open the First collapsible element</a>

You can see it working on this Fiddle. (The last anchor may be anywhere on the same page)