4

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

6 Answers 6

4

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/

5
  • Well, everything is good except that once it's diplayed on the same button click it should be faded out and on different button click it should fade out and fade in another content... I will have 4 buttons with 4 different content there...
    – dvlden
    May 14, 2012 at 20:15
  • Should have been clearer about that in your post, then :) Look at other answers...what you want is toggle. May 14, 2012 at 20:15
  • @EthanBrown - You should post the HTML for all four buttons with content, that way you will get an answer that does exactly what you are looking for, right now none of the answers account for fading in and out other elements etc. as it's not in the question!
    – adeneo
    May 14, 2012 at 20:17
  • Fully updated. I always ask correct question but for one button. And I have no clues to make usage of it after for more then one.
    – dvlden
    May 14, 2012 at 20:32
  • 1
    Okay, @Nenad, I updated my answer with a couple of solutions for you. Be sure to check out the jsfiddle to see if that's what you wanted. May 14, 2012 at 21:00
3
$('#info a').on('click', function(evt) {
   evt.preventDefault();
   $('#newsticker_1').toggle();
});
1
  • This might confuse someone who doesn't know exactly what jQuery functions do. However, I really like the simplicity. It uses jQuery functions without reinventing the wheel or over-complicating the code. If the OP uses this I suggest they read the jQuery docs on preventDefault and .toggle just to understand the inner workings.
    – Tom
    May 14, 2012 at 20:06
2

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>

4
  • Doesn't need to be in doc ready. And in OP's post it shows the button as a link you'd wanna prevent the default action of a link
    – chris
    May 14, 2012 at 20:05
  • @chris, Thanks I'll update answer. but my way will be different
    – Imdad
    May 14, 2012 at 20:06
  • This works... Sort of. It display content as "none" but on the click it doesnt reveal it? I did everything you wrote here ... replaced toogle tho with show , cause I will have 4 different buttons with 4 different content.
    – dvlden
    May 14, 2012 at 20:12
  • Use Firefox + Firebug to debug and get to know why it shows "none"
    – Imdad
    May 14, 2012 at 20:14
1

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

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

1

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

1
  • Nice... But theres no fadeIn/fadeOut and I have updated my question cause I forgot to mention that I have four buttons and four different contents... I thought it will be easy to make for more then one button :D ! Sorry about it !
    – dvlden
    May 14, 2012 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.