Please help with Javascript show/hide list

[ppc_michael]

I'm designing a site. It's not very good, I know, because I'm not very good at this stuff.

http://telecasters.msu.edu/goodlook/

Anyway, I'm having trouble with a Javascript/CSS combo. If you go to the link above, there's a box on the side labeled "Where to Watch." What I'd like is for the list of channel to start out collapsed, so that it looks like this. Then clicking on the individual channels should roll out the days and times for that channel, so that when all the channels are expanded, it will look like this. (I'll style that list better later. heh).

But when you go to the site, you'll see it doesn't behave that way at all. The "slide in" and "slide out" effects work (I wrote a little toggle function), but something about my CSS is bad.

Related Files:
http://telecasters.msu.edu/goodlook/
http://telecasters.msu.edu/stylesheets/sidebar.css
http://telecasters.msu.edu/javascript/sidebar.js

Also a little side-question: For links that trigger JavaScript events, I usually use <a href="#" onclick="event()">. I've noticed a lot of sites do that. But something about linking to a blank anchor like that causes my pages to jump back up to the top, as if the top is an anchor or something. Other sites don't do that. What am I doing wrong there?

 

[ppc_michael]

Something else that might help: the site without the CSS

http://telecasters.msu.edu/goodlook/?nocss

 

[angelwatt]

Starting out collapsed:
From looking at it, I'd guess that you need to call the toggleSchedule function when the page loads on all of those sections since they start visible. This can be done by using the onload attribute for the body tag or you can create the event through JavaScript alone.

Sub-list Not Showing:
I haven't nailed this down, but something that should be changed I noticed is a chunk of code that follows,

<a href="#">RHA TV<div class="channels">(Ch. 11 On Campus)</div></a>

The problem is that a div is not allowed inside a a according to standards, which may be creating some side effects. Instead you should use a span and then style it to be displayed as block to get the same effect.

I use the Firefox extension "Web Developer Toolbar" and one of its features is to view the generated source code, rather than just the original source. After I used the side bar sliding and looked at the generated code I saw that the code equivalent of ".station ul" had a style of "visibility: visible;". This is likely part of the problem since visibility still takes up space. It needs "display: none" instead, though I think this is controlled through one of the JavaScript libraries you're using. So I'm not sure how you should progress there, but it's at least so more information to consider.

You Side Question:
The way you're using is OK, but not my preferred way. I use the following technique.

<a href="javascript:toggleSchedule()">hi</a>

 

[stndn]

You can add 'return false;' to your javascript call to prevent it from jumping to the top of the page.

The jumping occurs because you're trying to access a local anchor (or whatever the formal name for # is), and because the browser can't find one without ID, it then decides to jump to the beginning of the page.


Otherwise, the solution suggested by angelwatt works, too.


-stndn.

 

[macfaninpdx]

It looks like you are using script.aculo.us. There is an easier way to toggle the effect you are looking for, without creating your own function. In your html source, your Where to Watch div contains a ul inside, with an onclick action on each li element. You could try something like the following instead:

<div class="box">
  <ul class="schedule">
    <li class="station" onClick="new Effect.toggle('station1', 'slide', {duration: 0.3});return false;">RHA TV <span class="channels">(Ch. 11 On Campus)</span>
      <div id="station1"><div>
      <ul id="rhatv">
        <li>Tuesday
          <ul>
            <li>7:00pm: MSU & U</li>
            <li>7:30pm: MSU Upfront</li>
          </ul>
        </li>
        <li>Wednesday
          <ul>
            <li>7:00pm: Sideshow</li>
            <li>7:30pm: The Show</li>
          </ul>
        </li>
      </ul>
      </div></div>
    </li>
    <li class="station" onClick="new Effect.toggle('station2', 'slide', {duration: 0.3});return false;">
    ...
    </li>
  </ul>
</div>

Notice I added the div tags around the part that will be sliding. With this, you don't need your own function. To start the li element collapsed, add display:none to your CSS file.

You can see more about the Effect.toggle method at the script.aculo.us site).

Cheers.

 

[ppc_michael]

Hello,

Thanks so much to everybody for the help!

The return false; thing worked to make it stop jumping to the top of the page, so yay thanks!

I'm still having trouble with the sliding in/out though. The suggestions related to that have not solved the problem. I've changed from Scriptalicious to MooTools but I'm still having the same problem. I can slide them in (so that they go away), but it's like once that happens, they're gone for good and won't slide out anymore. toggle() doesn't even work.

Seriously, what the heck is going on?

 

[macfaninpdx]

Hello,

Thanks so much to everybody for the help!

The return false; thing worked to make it stop jumping to the top of the page, so yay thanks!

I'm still having trouble with the sliding in/out though. The suggestions related to that have not solved the problem. I've changed from Scriptalicious to MooTools but I'm still having the same problem. I can slide them in (so that they go away), but it's like once that happens, they're gone for good and won't slide out anymore. toggle() doesn't even work.

Seriously, what the heck is going on?

I tried the above code (the changes I suggested using script.aculo.us) locally and it worked perfectly. If your code isn't working, maybe you need to add a display:block to your function on the slide out part, especially if you include a display:none on the slide in.