JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<div>
    <ul class="collapsible" data-collapsible="accordion">
        <li>
            <div id="about_stackoverflow" 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 id="509" class="collapsible-header"><span class="numbering">22</span>Second<span style="float:right">Asked 2/10/2015 7:23 PM</span></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="#about_stackoverflow" title="Click to open first item" data-click="true">open the First collapsible element</a> in this list.</p>
            </div>
        </li>
    </ul>
</div>

CSS

.numbering {
      text-align: center;
      margin-right: 1rem;
      width: 2rem;
      display: inline-block;
}

JavaScript

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