I’ve been posting online conference sign-up sheets for the past few days, and posting all 115 on one page would require a lot of scrolling. Not ideal, especially since a lot of parents will be accessing this page from mobile devices.

What I wanted was for two sections (ELD & ULD) to appear on the page (left), and for one to collapse when the other expanded, the same mechanism I implemented on my Websites page.

The Javascript worked just fine:

But notice this code (below). I assigned the property “display:none” to both div tags (“ELD” and “ULD”), because I wanted them both to be collapsed when the page loaded.

Assigning that property worked, BUT when the links were clicked to expand the sections, this is what would happen:

They expanded beyond the footer, and the main content container wouldn’t expand with the content at all. I tried everything…4 hours worth of “everything”. It worked if only one of the sections had that display property assigned to it. I even tried adding a blank, dummy section without that property, so that there would be one element on the page without that property. All to no avail.

I finally resorted to using an entirely different javascript and html code, one that is used on a few other pages throughout the site.

Everything works like I want it to now, but why was that code not working like it does on my website? Is it because Trinity’s site is .aspx and mine is .html? Can there not be more than one element on a page with that display property in .aspx?

All responses are welcomed. Although I have a solution, I really want to understand why the other codes wouldn’t work.

Leave a Reply