Question

Possible Duplicate:
JS/jQuery (Hide div, show div on click)

I’m new to web development and was wondering what the best way to hide elements was. I’m creating a note taking app and want to have a simple “add note” html form that expands when you click a button. Would I do this with CSS or Javascript?

For example

Add Note

after being clicked would expand to an html form something like this

Note Title: <form>

Note Body: <form>

Thanks!

Answer 1

There are multiple ways of hiding an element. You can either set the display property to hidden or you can also hide it using java script. Below given is solution using jQuery.

Html

<a href="#" class="clickme" > Add Note</a>
<div id="addNote">
    <!-- Your form goes here -->
</div>

You put your Note form in the div having id addNote. And the javascript for this is

$(document).ready(function() {
    $('#addNote').hide();
    $('.clickme').click(function() {
      $('#addNote').show();
      $('.clickme').hide();
      return false;
    });
});

When the page loads, firstly the addNote div is hidden by this $('#addNote').hide(); and when anybody clicks on the link with the class clickme the div having the form is displayed, and the clickme button is hidden.

You can add transition effects to $('#addNote').show()