他の答えは、OPが探しているものを十分に得ていないようです。私が理解していることから、OPは次のことを望んでいます：
#content-revealページ読み込み時に非表示#content-revealボタンを押すとフェードイン- 切り替える必要はありません
#content-reveal(つまり、一度表示されたら、表示されたままにする必要があります)。
それに基づいて、ここに私の解決策があります：
$(document).ready( function() {
$('#content-reveal').hide();
$('#show-button').click( function() {
$('#content-reveal').fadeIn( 500 );
} );
} );
jsfiddle はこちら: http://jsfiddle.net/xK83w/
編集：OPの質問の編集に基づいて、達成しようとしているものを実行するアプローチを次に示します。
$(document).ready( function() {
$('#content-reveal').hide();
$('#info').click( function() {
$('#content-reveal').fadeOut( 500, function() {
$('#content-reveal').html( '<b>info HTML</b>' );
$('#content-reveal').fadeIn( 500 );
} );
} );
$('#search').click( function() {
$('#content-reveal').fadeOut( 500, function() {
$('#content-reveal').html( '<b>search HTML</b>' );
$('#content-reveal').fadeIn( 500 );
} );
} );
// repeat for 'player' and 'socials'
}
ここでjsfiddleを更新しました：http://jsfiddle.net/xK83w/1/
ただし、コンテンツ ブロックに大量の HTML が含まれている場合は、別のアプローチを検討して、大量の HTML テキストで Javascript に負担をかけないようにすることをお勧めします。たとえば、4 つの異なる があり、次divのように選択できます。
<div id="content">
<div id="content-reveal-info">
<ul id="newsticker_1" class="newsticker">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</li>
<li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia...</li>
<li>Bubble bubble ipsum dolor sit amet, consectetur adipisicing elit...</li>
</ul>
</div>
<div id="content-reveal-search">
<b>search HTML</b>
</div>
<div id="content-reveal-player">
<b>player HTML</b>
</div>
<div id="content-reveal-socials">
<b>socials HTML</b>
</div>
次に、実際の切り替えを行う関数を作成します。
var activeElement;
function activateElement( eltSuffix ) {
if( activeElement ) {
activeElement.fadeOut( 500, function() {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
} );
} else {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
}
}
最後に、イベント ハンドラーを接続します。
$(document).ready( function() {
$('#content div').hide();
$('#info').click( function() {
activateElement('info');
} );
$('#search').click( function() {
activateElement('search');
} );
$('#player').click( function() {
activateElement('player');
} );
$('#socials').click( function() {
activateElement('socials');
} );
} );
jsfiddle はこちら: http://jsfiddle.net/xK83w/1/