[jQuery] Re: show hidden div on click

[Smith, Allex]

Here is how I would approach this:

JavaScript
<script type="text/javascript">
        $(document).ready(function(){
                $('.fadein').click(function(){
                        // Make the id overview show
                        $('#overview').show('slow');
                        // override default a behavior
                        return false;
                });
        });
</script>

HTML
<div id="overview" style="display:none;">This is some hidden
content</div>

<a class="fadein"
href="link-to-content-for-non-javascript-users.html">Show Overview</a>

-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of David J Bauer
Sent: Monday, July 14, 2008 3:49 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] show hidden div on click


n00b here attempting to implement a simple jQuery function: I want to
slowly show (fade in) a hidden division after clicking a text anchor
(link). I've managed to get some jQuery plugins working correctly, but
coding something myself is apparently beyond my current capabilities.
:P


Here is the script code, inserted in the head:

<script type="text/javascript">
        $(document).ready(function(){
                                
        function fadein() {
        $("#overview").show("slow");
              $(".fadein").click(fadein) {                              
            });
          });
        });
</script>


Here is the style code for the division from the CSS file:

div#overview {
  width: 746px;
  height: 340px;
  position: relative;
  top: -415px;
  left: 0px;
  background-color: #e4f0c5;
  z-index: 1;
  margin: 5px;
  border: 2px solid #90a35d;
  text-align: left;
  color: #294145;
  padding: 10px;
  visibility: hidden;
}


And here is the HTML code from the body:

<a class="fadein" onclick="fadein(#overview);">Overview</a>


Note that in the CSS I have visibility as hidden: is that a problem?

Thanks for any assistance!

Regards,
-neuron