FadeIn / fadeOut specified div on the click of another div?

Question

I am creating something, and I was wondering if anyone could help me with one problem. I have no idea how I can create javascript that will always hide the specified div identifier and expand it by clicking on another div (e.g. buttons). 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 that I have content in another div that I want to fade out when I click the first button on top.

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

Well ... So, the positions are set, and everything is in the right place.

So ... How to hide <div id="content-reveal"> and show it when someone clicks on my button?

I have 4 different buttons with 4 different content. Thus, when you press the same button, the content disappears again, and when you press another button, the old content disappears, a new one appears.

A simple question, a difficult task for me ...

If anyone can help, I really appreciate ...

Answer 1

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

• Hide #content-reveal on page load
• Fade-in #content-reveal on button click
• No need to switch #content-reveal (i.e. after displaying, it should remain displayed)

Based on this, here is 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 changes to the OP question, here is an approach that will do what you want 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 might want to consider a different approach so that you don't burden your Javascript with a lot of HTML text. For example, you can have four different div s and choose between them like this:

 <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 actually switch:

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

Answer 3

Use jQuery

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

If you want to show / hide after each click, instead of $("#content-reveal").show(); write $("#content-reveal").toggle();

For a link, so as not to bring you to the top of the page, always follow

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

Answer 4

This is jQuery, not simple javascript, but it can help you, there you got examples http://api.jquery.com/toggle/

Answer 5

 <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, other semi-simple and smaller ways to do this, but to see what you gave to this will be my quick version, which does not affect the general concept of what you already have.

Answer 6

Here is a quick JSFiddle I made. The concepts that are already presented here are built.

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

EDIT: Using .toggle ()