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="http://ift.tt/Wao6TO" 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="http://ift.tt/Wao6TO" 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="http://ift.tt/Pi2lUG" onclick="show_content('vol1', this)">
<span>vol1</span>
</a>

</li>
<li> <a href="http://ift.tt/Pi2lUG" 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>


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

}).hide();

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


Fiddle







http://ift.tt/1w05Hes