Can someone help me with a small piece of Javascript for a school project?

Dev Zone Code
1

What I'm trying to do is have a webpage that has multiple buttons on it that open sliding panels. I'm basing it off of a old tutorial I found that explains how to make one panel but I need several. I can add more but I need it so that the user doesn't have to close one panel before opening the next. Basically the buttons serve as a navigation menu and the panels as the other pages in the site. If someone can help I'd greatly appreciate it. Here is a link to a zip file containing the .html and .css file so you can look at it and hopefully get a better Idea of what I am meaning. https://drive.google.com/file/d/0B_magBtUbl_PM2xYUzlHSHBydFU/view?usp=sharing

2

You sure this is Java and not Javascript?

3

It is Javascript. Sorry I'm about half asleep right now.

4

If you can change the title to Javascript, or close this thread and open one with a proper title it might help your chances. Unfortunately I do not currently speak Javascript.

5

I already changed the title.

6

you just need to change coordinates in the css. try for example to set .panel2 "top:" to "200px;"

7

Unless you want panel 1 to disappear before panel 2 appears. Then you have to insert if statements into the scripts to see if other panels are open then close them if its true.
Or have a button that opens one panel with buttons inside it that fills the panel with the different pages.

Don't ask me how tho. I haven't worked mutch with JS

8

I am wanting to close the first panel before the second one opens. I was able to get it to work by adding a statement like $(".panel").hide() to the trigger script so it will hide the first one if its open. Adding a statement like this for the other panels to each trigger will work for what I'm needing it's just a bit redundant and messy.

9

maybe you could edit the javascript i hacked together here host_schedule.html

3 blocks of script in source code at end of file.
1st - load jquery library (essential)
2nd - set only 1 DIV [from daybox0 - daybox6] as visible according to calculated weekday (you wouldn't need any of this if want all DIVs closed at start)
3rd - this is the main workhorse to slide open selected DIV and slide close any other

Changing 'slideDown(300)' to 'show()' and 'slideUp(300)' to 'hide()' will open and close elements with no animation effect

You could prob substitute the jquery slideUp and slideDown functions for a different effect, but i don't know jquery & javascript well enough to suggest changes