[jQuery] Re: show hidden div on click

[neuron]

Thanks for the help everyone- it works! :) Now, some tweaking... I
have several divisions that I want to show in this manner, so how do I
make the code a general rule as opposed to a specific order to show
#overview? For example, how would I show #contact without writing a
new script snippet? I would like to use the same class (fadein).

--
As an update, here is my relevant (and working!) code:


Script in head:

script type=text/javascript
  $(document).ready(function(){
$('.fadein').click(function(){
  $('#overview').show('slow');
  return false;
});
  });
/script


CSS:

div#overview {
  display: none;
}


HTML in body:

a class=fadeinOverview/a
div id=overviewpthis is the overview text/p/div

[jQuery] Re: show hidden div on click

[Giovanni Battista Lenoci]

David J Bauer ha scritto:

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

  

Use display:none :-)

bye

--
gianiaz.net - web solutions
p.le bertacchi 66, 23100 sondrio (so) - italy
+39 347 7196482 

[jQuery] Re: show hidden div on click

[Kevin Pepperman]

without seeing all your code...

The main thing I see wrong here is you are calling your fadin() function
with an unneeded argument that is also a string that is not encased by
quotes.

The argument is not required for your function at all--

So try this:

a class=fadein onclick=fadein();Overview/a

If you DO need the argument for some reason use:

a class=fadein onclick=fadein('#overview');Overview/a

On Mon, Jul 14, 2008 at 6:48 PM, David J Bauer [EMAIL PROTECTED]
wrote:


 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




-- 
Vince Lombardi  - Winning is habit. Unfortunately, so is losing.

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