Expanding information window

[dsockrider]

Check out this expanding information/submenu info using CSS and Javascript.

http://www.sockrider.com/javascriptEXPANDO/

Would it be alright to use something similar in my pages? I'm just assuming a couple styles would need to be added to the master .CSS sheet.

[saltybeagle]

Would it be alright to use something similar in my pages?

No problem. I think the css styles would be better suited inline, as the css isn't anything more complex than style="display:none" and a selector for that in the stylsheet seems a little useless.

I would change the javascript to just take in the ID of the element, which would make it a little more flexible.
Peoplefinder uses a similar technique... which could be simplified to use the ternary conditional like your javascript.

[dsockrider]

What would the code look like? Not sure how to simplify it like you're referring.

[saltybeagle]

I was just suggesting to change it to take in any element ID instead of hard-coding the 'expand' prefix for the elements.
It could work something like this...

Code: Select all

<script type="text/javascript">
function showHide(e)
{
   document.getElementById(e).style.display=(document.getElementById(e).style.display=="block")?"none":"block";
   return false;
}
</script>

Callable by:

Code: Select all

<a href="#" onclick="return showHide('details');" onkeypress="return showHide('details');">Show/Hide</a>
<div id="details" style="display:none;">Yadayada</div>

I wasn't suggesting anything more complicated than that. But that's a useful technique David, thanks.