JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav nav-stacked" id="nav-stacked">
    <li class="active"><a href="#" onclick="show_content('dashboard', this)"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a>

    </li>
    <li id="vollist-container" class="menu open"><a href="#" class="menu-toggle"><i class="fa fa-sort-alpha-asc fa-fw"></i>Volumes<i class="caret"></i></a> 
        <ul id="vol-list" class="submenu">
            <li> <a href="javascript:void(0);" onclick="show_content(vol1, this)">
                    <span>vol1</span>
                </a>

            </li>
            <li> <a href="javascript:void(0);" onclick="show_content(vol2, this)">
                    <span>vol2</span>
                </a>

            </li>
        </ul>
    </li>
</ul>
<div id="content">
    <div id="dashboard" class='show'>dashboard</div>
    <div id="volumes">
        <div id="vol1">vol 1</div>
        <div id="vol2">vol 2</div>
    </div>
</div>

CSS

.show {
    display: block;
}
.hide {
    display: none;
}

JavaScript

function show_content(id, element) {
    $('#content > div').hide();
    $('#' + id).show();
}