title: How to expand a collapsible item from link within another collapsible item [js]?
body: <p>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...</p>
  
  <p><strong>Before selecting the hyperlink.</strong>
  <img src="https://i.stack.imgur.com/uY7pm.png" alt="enter image description here"></p>
  
  <p><strong>After selecting.</strong>
  <img src="https://i.stack.imgur.com/oWrJY.png" alt="enter image description here"></p>
  
  <p><strong>How can I get the First collapsed item to expand when the link to it in the Third item's paragraph is selected?</strong></p>
  
  <p><strong>What I got</strong>: If the example above had more collapsed items, then the code below would scroll the webpage to the desired collapsible item (half the solution).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
        &lt;!--Import materialize.css--&gt;
        &lt;link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div&gt;
          &lt;ul class="collapsible" data-collapsible="accordion"&gt;
              &lt;li&gt;
                &lt;div class="collapsible-header"&gt;&lt;i class="mdi-navigation-chevron-right"&gt;&lt;/i&gt;&lt;a name="987"/&gt;First&lt;/a&gt;&lt;/div&gt;
                &lt;div class="collapsible-body"&gt;&lt;p&gt;Hello StackOverflow! SO's da' bomb diggidy!&lt;/p&gt;&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;div class="collapsible-header"&gt;&lt;i class="mdi-navigation-chevron-right"&gt;&lt;/i&gt;Second&lt;/div&gt;
                &lt;div class="collapsible-body"&gt;&lt;p&gt;Why is the person who invests your money called a broker?&lt;/p&gt;&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;div class="collapsible-header"&gt;&lt;i class="mdi-navigation-chevron-right"&gt;&lt;/i&gt;Third&lt;/div&gt;
                &lt;div class="collapsible-body"&gt;&lt;p&gt;I'd like to &lt;a href="#987"&gt;open the First collapsible element&lt;/a&gt; in this list.&lt;/p&gt;&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
        &lt;!--Import jQuery before materialize.js--&gt;
        &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>