Show the content based on link click. And hide previously selected

Wednesday, July 9, 2014

I want to show the content based on link click. and hide the content which was previously selected.

Any way to do it? Note : I dont want to change the markup.

<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 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="" onclick="show_content('vol1', this)">

<li> <a href="" onclick="show_content('vol2', this)">

<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>

function show_content(id, element) {
var children = $("#content").children();
children.filter(function () {
return $(this).css('display') == 'block';


$("#" + id).parent().css('display') == 'none' ? $("#" + id).parent().show() : null;
$("#" + id).toggleClass('hide');