CSS/HTML for dummies

[Lemur]

If we have any bright code jockeys in the Org, I could use a spot of help. Attempting to create a collapsing field for a small business website, something like this:

Button

Content content content content

Where clicking the button shows the content, and clicking it again hides the content. You would think this would be easy. You would think this could be accomplished without resorting to Javascript.

Anyway, having copied and tweaked several code samples, all of which proved unsatisfactory, I'm curious if any Org code-monkeys have a simple, non-Javascript method for creating collapsing fields. Code samples appreciated.

[naut]

A click? Javascript is your best bet. CSS allows a hover, which is nice, but not a click to my (rusty) knowledge.

[Lemur]

Well, I'm basically trying to re-create the functionality of this board's [ex] tag with a few extras thrown in. "Frustrating" doesn't begin to cover it.

[Tellos Athenaios]

It is the on/off behaviour that means you'll need JavaScript, more than the click. (The click is possible to work with using :visited (pseudo-class) and the + selector).

The typical JavaScript thing to do is to have the CSS define two classes for this purpose and do something like:

var toggleOn="toggleOn"; // class name used in CSS for active/visible style
var toggleOff="toggleOff"; // class name used in CSS for hidden style
function toggleButton(elementId) {
   var elem=document.getElementById(elementId); // find the element to toggle on/off
   if(elem !=null) { // do not do anything unless the element actually exists
      if(elem.className.indexOf(toggleOn) == -1) { // if class name does not contain the toggleOn name
        elem.className.replace(toggleOff,toggleOn);
      }
      else {
        elem.className.replace(toggleOn,toggleOff);
      }
   }
   return false; // do not let the event bubble up any further, in case of hyperlinks this prevents the browser from changing address
}

Then in HTML something like

<a href="#someValidIdHere" onclick="javascript:toggleButton('elementToToggle');">Button</a>
<p id="elementToToggle">Content content content</p>

In CSS:

.toggleOn {
  /* styles to make elements appear visible, I simply swap background & foreground instead */
  background: #cccccc;
  color: #dedede;
}
.toggleOff {
  /* styles to make elements appear hidden, I simply swap background & foreground instead */
  color: #cccccc;
  background: #dedede;
}

[Lemur]

Bloody hell, Tellos, may I send you a copy of the page I'm working on? I must learn all of your mad skillz to make phat rain.

[Tellos Athenaios]

Yes but you're probably better off reading through some tutorials here: http://www.w3schools.com/ and using a keen mind to solve your problems. Quite a lot of that mad skillset can be yours for the mere effort of some Google searches and reading tutorials on the web.