jQuery Toggle question
- Started
- Last post
- 7 Responses
- monstroyer
Hoping someone can help a jQuery newbie:
Was wondering if anyone could tell me, with a jQuery div toggle; how to set the initial state to be a fixed pixel height.
In all the tutorials I've found the two parameter states are "show" and "hide" but I'm trying to have the initial height be 50% and then when clicked go to 100%.
If it helps any, this is the .js I'm trying to modify but not knowing any js I'm finding it difficult: http://www.adipalaz.com/experime…
- monstroyer0
Please and thank you.
- Stugoo0
i think what you have there is a little overkill
you could do (remove spaces before '.')
$('#element').css({ height : '50%' });
then when you click toggle do :
$('#element') .stop() .animate({ height : '100%; }, 400);
revert back:
$('#element') .stop() .animate({ height : '50%; }, 400);
- instrmntl0
i like your experiments page. thanks for sharing.
- monstroyer0
@Stugoo: Thanks! I was able to get the first bit to work and now the div is at 50% height but I'm at a loss at how to implement the toggle. I know this is probably basic js so please forgive me.
So I'm trying to create an event handler here:
$('#toggle').click( function(){
$('#element').stop().animate({ height : '100%'; }, 400);
});
});and then call it with this:
<a href="#" id="toggle">more</a>What am I doing wrong?
Also, sorry about the misunderstanding. The site above with the .js doesn't belong to me. It's just something I found while researching this.
- spraycan0
wrong: $('#element').stop().animate({ height : '100%'; }, 400);right: $('#element').stop().animate({ height : '100%' }, 400);
- welded0
This should do it but I didn't test.
$('#toggle').toggle(
function(){
$('#element').stop().animate({ height : '100%' }, 400);
},
function(){
$('#element').stop().animate({ height : '50%' }, 400);
}
);
- monstroyer0
Awesome guys! Thanks! After some playing around with the above I was able to get this to work. Thanks tons!