Show/Hide Div or Element

I have visited a site and a feature entertained me a lot but I can't figure out how to replicate it! 开发者_StackOverflow中文版XD Can someone help me out?

I'd like to replicate the functionality of this site's copyright notification my sites to give credit towards me and my co-worker.

I will really appreciate it. Thank you.

The site you're referring uses the jQuery library. It really is very simple. A statement such as this

$("#mydiv").hide();

will hide the <div> with id "mydiv". You can also show instead of hide, and you can pass a number to the function, e.g. hide(200) to animate the action. In this case, animate the hiding of the div over 200 ms.

There is also the toggle effect that hide or show the element alternatively.

I recommend you read about jQuery events and selectors in the jQuery documentation.

Also in the future, Googling your question before you ask it might save you some time ;-)

Edit

Actually the specific feature you're describing on the site you linked is handled using the HTML5 element andronikus talks about. Arguably HTML5 isn't ready for use on the web yet since there still are lots of browsers that can't handle it. In my opinion using jQuery show/hide is a better solution at this point in time.

If you're using a browser or extension that allows you to "Inspect Element" on right-click, you can look at the code for page elements directly. Here, the page is using the new [<details>][1] tag, which is new in HTML5. It seems to look like this:

<details>
  <summary>Always show this</summary>
  <p>This stuff is hidden until you click the arrow.</p>
  <p>Woooo!</p>
</details>

No Javascript/jquery to mess with, although there's probably some CSS happening too. This is a very cool new element!

(Normally this would be done with a jQuery show()/hide() as described in the other answers and comments. I suspect it was added to HTML5 because it's a very common feature.)

You can implement using jQuery slideToggle().

<div id="inner">
  <div class="text">
  Your Text
  </div>
</div


$(document).ready(function(){
$(".text").hide();
$("#inner").click(function(){
$(".text").slideToggle();
});
});

You can see more information here http://www.sendesignz.com/index.php/jquery/72-how-to-implement-toggle-search-box-in-jquery