ok heres an HTML structure
<style type="text/css">
* { /* css reset */
margin:0;
padding:0;
}
.work { /* this prevents the content from still being shown when you slide
up */
overflow:hidden;
}
</style>
<div class="work">
<a href="#" class="slidecontrol">slide controller</a>
<div class="content">
put a lot of content in here
</div>
</div>
EXPLANATION
1. we have a div wrapper.
2. we create a hyperlink and add the class slidecontrol
3. we create a content div
THE SCRIPT
<script type="text/javascript">
// you can use this instead of $(document).ready(
$(function() {
var obj = $(". work"): // we store our wrapper in a variable
var slidecontrol = $(".slidecontrol", obj); // we select our slide
controller from within the wrapper
var content = $(".content", obj); // select the content from within the
object;
var switcher = 0;
slidecontrol.click(function(e) { // i added a pre-defined variable e in
the click event, this is defined in jquery
e.preventDefault(); // prevents jumping to the top of the page
if(switcher == 0) { // if switch = 0 slide up
content.animate({ marginTop:"-"+content.height()+"px"}, 500);
} else if(switcher == 1) { // if switch = 1 slide down
content.animate({ marginTop:0}, 500);
}
});
});
</script>
On Mon, Jan 18, 2010 at 12:10 PM, for...@gmail.com <for...@gmail.com> wrote:
> I am new to jQuery but am using it to SlideDown a DIV element when the
> a:link is clicked.
>
> However, no matter what link i click on the page, it slides down the
> div, it's as if the script has taken over every link on the page.
>
> Here is the code:
>
> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
> jquery.min.js"></script>
> <script type="text/javascript" charset="utf-8">
> $(document).ready(function () {
> var $div = $('#alias-box');
> var height = $div.height();
> $div.hide().css({ height : 0 });
>
> $('a').click(function () {
> if ($div.is(':visible')) {
> $div.animate({ height: 0 }, { duration: 250, complete:
> function () {
> $div.hide();
> } });
> } else {
> $div.show().animate({ height : height }, { duration:
> 250 });
> }
>
> return false;
> });
> });
> </script>
>
> html:
>
> <a href="#alias-box" style="font-size:10px;">Custom Alias</a>
> <div id="alias-box"><input name="new_alias" class="field_50"
> type="text" /></div>
>
> so clicking Custom Alias, drops the 'alias-box' div.
>
> But even when i click other links such as:
>
> <a href="contact.php">Contact</a>
>
> it ignores going to contact.php and displays the div.
>
> Any ideas how to fix this?
>
