<li>
            <span><i class="icon-globe"></i> <a href="#demo1">demo1</a></span>
        </li>

        <li>
            <span><i class="icon-globe"></i> <a href="#demo2">demo2</a></span>
        </li>

<div class="text">

<div id="demo1">
show demo1
</div>

<div id="demo2">
show demo2
</div>

</div>

$(document).ready(function () {

$("#demo1").hide();
$("#demo2").hide();

$('a[href*="#demo1"]').bind('click', function() {
        $("#demo1").show('linear');
        $("#demo2").hide("fast");
});

$('a[href*="#demo2"]').bind('click', function() {
    $("#demo2").show('linear');
     $("#demo1").hide("fast");
});

    });