User:Efuchs - Revision history

fuchse at 18:47, 24 October 2007

2007-10-24T18:47:49Z

fuchse: /* Example 2 */

2007-10-24T18:31:22Z

‎Example 2

fuchse at 18:07, 24 October 2007

2007-10-24T18:07:04Z

fuchse at 18:05, 24 October 2007

2007-10-24T18:05:53Z

New page

== Hide an Object ==

Copy the examples below to show / hide objects.

The '''title''' attribute of the span tag must be the same as the '''id''' attribute of the div tag.

=== Example 1 ===

{| cellpadding="10" cellspacing="4" style="text-align:left;"
|- style="vertical-align:top;"
| width=150 | <span class="toggleblock" title="test">Show/Hide Block</span> <div id="test"> This is a Block </div>
|<code><span class="toggleblock" title="test">Show/Hide Block</span></code>
<code>
<div id="test">
This is a Block
</div>
</code>
|}

=== Example 2 ===
''+ / - displays status of block''

{| cellpadding="10" cellspacing="4" style="text-align:left;"
|- style="vertical-align:top;"
| width=150 | <span class="toggleblock" title="test2">Show/Hide Block [<font>+</font><font style="display:none;">–</font>]</span> <div id="test2"> This is a Block </div>
|<code><span class="toggleblock" title="test">Show/Hide Block [<font>+</font><font style="display:none;">–</font>]</span></code>
<code>
<div id="test2">
This is a Block
</div>
</code>
|}

@@ Line 4: / Line 4: @@
 The '''title''' attribute of the span tag must be the same as the '''id''' attribute of the div tag.
@@ Line 13: / Line 15: @@
 ! style="color:#444" | code
 |- style="vertical-align:top;"
-| width=150 | <span class="toggleblock" title="test">Show/Hide Block</span> <div id="test"> This is a Block </div>
+| width=150 | <span class="toggleblock" title="test">Show/Hide Block</span> <div id="test" class="hiddenblock"> This is a Block </div>
 |<code>&lt;span class=&quot;toggleblock&quot; title=&quot;test&quot;&gt;Show/Hide Block&lt;/span&gt;</code>
 <code>
-&lt;div id=&quot;test&quot;&gt;
+&lt;div id=&quot;test&quot; class=&quot;hiddenblock&quot;&gt;
 This is a Block
 &lt;/div&gt;
@@ Line 32: / Line 34: @@
 ! style="color:#444" | code
 |- style="vertical-align:top;"
-| width=150 | <span class="toggleblock" title="test2">Show/Hide Block [<font>+</font><font style="display:none;">&ndash;</font>]</span> <div id="test2"> This is a Block </div>
+| width=150 | <span class="toggleblock" title="test2">Show/Hide Block [<font>+</font><font style="display:none;">&ndash;</font>]</span> <div id="test2" class="hiddenblock"> This is a Block </div>
 |<code>&lt;span class=&quot;toggleblock&quot; title=&quot;test2&quot;&gt;Show/Hide Block [&lt;font&gt;+&lt;/font&gt;&lt;font style=&quot;display:none;&quot;&gt;&ndash;&lt;/font&gt;]&lt;/span&gt;</code>
 <code>
-&lt;div id=&quot;test2&quot;&gt;
+&lt;div id=&quot;test2&quot; class=&quot;hiddenblock&quot;&gt;
 This is a Block
 &lt;/div&gt;
 </code>
 |}