fadeIn/fadeOut specified div on click of another div?

Question

I am creating something and I was wondering, if anyone can help me with one problem there. I have no ideas, how can I make a javascript that will always hide specified div id, and reveal it on a click of another div (for example an button). EDITED:

So let's say I have 4 buttons.

<div class="section" id="info" style="margin-top: 0px; ">
<h3><a href="#">Button</a></h3>
</div>

<div class="section" id="search" style="margin-top: 0px; ">
<h3><a href="#">Button2</a></h3>
</div>

<div class="section" id="player" style="margin-top: 0px; ">
<h3><a href="#">Button3</a></h3>
</div>

<div class="section" id="socials" style="margin-top: 0px; ">
<h3><a href="#">Button4</a></h3>
</div>

Now let's say I have an content in another div, that I want to fade in on the click of the first button from above.

    <div id="content-reveal">
    <p>something here</p>
    </div>

    <div id="content-reveal-2">
    <p>something here</p>
    </div>

    <div id="content-reveal-3">
    <p>something here</p>
    </div>

    <div id="content-reveal-4">
    <p>something here</p>
    </div>

Okay... So positions has been set and everything is on correct place.

So... How can I hide the <div id="content-reveal"> and show it when someone click on my button?

I have 4 different buttons with 4 different content. So on click of same button, content disappears again, and on click of another button, old content disappears, new one appears.

Simple question, hard task for me...

If anyone can help, I really appreciate...

Answer 1

It seems like the other answers are not quite getting what the OP is looking for. From what I understand, the OP wants to:

• Hide #content-reveal on page load
• Fade-in #content-reveal when the button is pressed
• No requirement to toggle #content-reveal (i.e., once it's displayed, it should stay displayed)

Based on that, here's my solution:

$(document).ready( function() {
    $('#content-reveal').hide();
    $('#show-button').click( function() {
        $('#content-reveal').fadeIn( 500 );
    } );
} );​

jsfiddle here: http://jsfiddle.net/xK83w/

EDIT: based on the edits to the OP's question, here's an approach that will do what you're looking to accomplish:

$(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'
}

Updated jsfiddle here: http://jsfiddle.net/xK83w/1/

However, if your content blocks contain a lot of HTML, you may want to consider a different approach so you're not burdening your Javascript with a lot of HTML text. For example, you could have four different divs, and select between them like so:

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

Then create a function to do the actual switching:

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 );
    }
}

Then finally hook up your event handlers:

$(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 here: http://jsfiddle.net/xK83w/1/

Answer 2

$('#info a').on('click', function(evt) {
   evt.preventDefault();
   $('#newsticker_1').toggle();
});