Myths on Maps

  • Log in
  • « MySQL and group_concat
  • Title madness »

display toggling with javascript

Posted by gregster on 01 Jun 2010 in Activity log

It would appear as though javascript will only read the value of CSS instructions if they were written by javascript.
For example, let’s say you have:

CSS
div#doNotShow {display: none}

Javascript
function toggle(divId) {
var e = document.getElementById(divId);
if(e.style.display != 'none')
e.style.display = 'none';
else
e.style.display = 'block';
}

You will need to click twice (not double-click) to show it the first time. After that it will respond as you expected. It’s like this because the first time you click, you’re setting the display property to none in js. Thereafter, it has explicit js-set styles to work with and will respond the way you want. On refresh, of course, you’re back to square one.

I’m sure a universal toggle function can be written (using more lines of code, and getComputedStyle or similar), but this suits my needs. Two functions: one to showHide hidden elements; and one to hideShow visibles.

function showHide(divId) {
document.getElementById(divId).style.display = (document.getElementById(divId).style.display == "block") ? "" : "block";
}
function hideShow(divId) {
document.getElementById(divId).style.display = (document.getElementById(divId).style.display == "none") ? "" : "none";
}

This entry was posted by Greg and filed under Activity log.

Myths on Maps

This project will focus on deploying an interactive map of Europe with overlays for Greek and Roman myths, history, people and events.
SVN instructions for MoM editors
Development URL
HCMC Blogs home
  • Archives
  • Categories

Search

XML Feeds

  • Atom: Posts
  • RSS 2.0: Posts
What is RSS?

This collection ©2023 by admin • Help • Multiblog engine