Forums

CameronDuthie

Hi There,

I was wondering if anyone could help me out with some jQuery magic. I'm trying to achieve a similar effect to the hidden menu on Happy Cogs 'Cognition' blog site. The menu is at the top right and when clicked on, the website slides down to reveal the other sites of the Happy Cog family. The only thing i can think of that is similar is an Accordion Menu, but it doesn't quite react the way i would like it too. I was wondering if anyone could point me in the right direction to help achieve this effect?

The link to the site is, http://cognition.happycog.com/

Many Thanks,

Cameron

stevedeer

not an expert. but looking thru the source code it's "jQuery easing v1.3"...
http://gsgd.co.uk/sandbox/jquery/easing/

BoringCode

This is a basic way to achieve a similar effect.

<script>
$("#linktoclick").click(function() {
$("#hiddendiv").slideToggle();
});
</script>

Obviously you would want your hidden div to be hidden so you might write some CSS to display:none

CameronDuthie

Awesome! Thanks for your help guys, much appreciated!

stevedeer

cameron... I hope you don't mind me hijacking your thread, but I'm a newbie to this myself.

I've set up a fiddle...

http://jsfiddle.net/stevedeer/Pbm3w/32/

I'm trying to reveal the hidden div "#boxtoreveal" by using the paragraph box "p.trigger" as the trigger (the div should ease down, and then ease back up when the trigger is pressed again

I'm struggling with BC's code, can anyone point me in the right direction

thanks in advance

steve

ps: apologies if I'm not using the correct descriptive words

stevedeer

.

stevedeer

I've tried this script in the js pane...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("p.trigger").click(function() {
$("#boxtoreveal").slideToggle();
});
</script>

but to no avail

treehouse : what would you like to learn today?

Forums

Hidden Menu