We can use geography to have an element slide down in our HMO document.
This example illustrates how the effect looks if we click the View panel div a panel slides down with
some text
creating this effect is fairly simple.
Let's take a look at the script to see how it works.
The first thing to note is we have two DBS created in our body take the first div has the I.D. top bar.
This is the div that will be click to activate the sliding panel the second div with the I.D. panel
is the actual panel that will slide down we've defined some basic style rules in our style sheet for
these specific dos
first.
We've specified that both the panel and top bar do will have padding of five pixels centralized text
alignment a yellow background and a one pixel solid black border and we can see that you're the background
is yellow there's a bit of there's a five pixel padding around the text
you can see the black border and the text alignment is centralized that's where both the top bar and
also the panel itself.
The panel also has additional rules
we've specified a padding of 80 pixels and a display non property to make sure that the panel is not
visible on page load so remember initially when the page is loaded we don't see the panel do we only
see it when the View panel div is quick
now in our script in between our open and close script tags
we've created our functions so inside the document the ready function we've attached a click event to
the top bar do
next.
We've attached a slide down action on the panel and specify the speed of 1000 so this event or this
action activates when this event occurs when the top bar is clicked the panel will slide down it is
speed of 1000
and that's it.
As you can see creating this effect is fairly simple and produces a nice effect.