CODEWITHSUNDEEP
javascriptjqueryhtmlfadeshow-hide
dvlden
dvlden

Reputation: 2462

fadeIn/fadeOut specified div on click of another div?

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

Upvotes: 4

Views: 2445

Answers (6)

Ethan Brown
Ethan Brown

Reputation: 27282

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/

Upvotes: 4

Tom
Tom

Reputation: 1057

Here is a quick JSFiddle I made. Built off of the concepts that are already provided here.

http://jsfiddle.net/Talty09/mv7qx/2/

EDIT: Using .toggle()

Upvotes: 1

Imdad
Imdad

Reputation: 6032

Use jQuery

$(document).ready(function(){
  $("#content-reveal").hide();
  $("#info").click(function(){
     $("#content-reveal").show();
   });

});

If you want to show/hide after every click then in place of $("#content-reveal").show(); write $("#content-reveal").toggle();

For link not to take you to the top of the page always do

<a href="jaavascript:void(0);">Button</a>

Upvotes: 2

chris
chris

Reputation: 36937

<div class="section" id="info" style="margin-top: 0px; ">
<h3><a href="#" id="showDiv" rel="hidden">Button</a></h3>
</div>
<div id="content-reveal">
    <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>

<script type="text/javascript">
$('#showDiv').click(function(e){
   e.preventDefault();
   if($(this).attr('rel') == 'hidden'){
      $('#content-reveal').show();
      $(this).attr('rel', 'shown');
   }
   else
   {
      $('#content-reveal').hide();
      $(this).attr('rel', 'hidden');
   }
}
</script>

of course theres other semi easier and smaller ways to do this, but seeing what you've given this would be my quick rendition that doesn't effect the overall concept of what you already have much

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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

Upvotes: 3

jperelli
jperelli

Reputation: 7197

This is JQuery, not plain javascript, but it may help you, there you got examples http://api.jquery.com/toggle/

Upvotes: 1

Related Questions