Difference between revisions of "User:Efuchs"

 
(One intermediate revision by one other user not shown)
Line 4: Line 4:
  
 
The '''title''' attribute of the span tag must be the same as the '''id''' attribute of the div tag.
 
The '''title''' attribute of the span tag must be the same as the '''id''' attribute of the div tag.
 +
 +
<span class="hiddenblock">Adding the class '''hiddenblock''' to your div's will style them like this.</span>
  
  
Line 13: Line 15:
 
! style="color:#444" | code
 
! style="color:#444" | code
 
|- style="vertical-align:top;"
 
|- 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;span class=&quot;toggleblock&quot; title=&quot;test&quot;&gt;Show/Hide Block&lt;/span&gt;</code>
 
<code>
 
<code>
&lt;div id=&quot;test&quot;&gt;
+
&lt;div id=&quot;test&quot; class=&quot;hiddenblock&quot;&gt;
 
This is a Block
 
This is a Block
 
&lt;/div&gt;
 
&lt;/div&gt;
Line 32: Line 34:
 
! style="color:#444" | code
 
! style="color:#444" | code
 
|- style="vertical-align:top;"
 
|- 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;test&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;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>
 
<code>
&lt;div id=&quot;test2&quot;&gt;
+
&lt;div id=&quot;test2&quot; class=&quot;hiddenblock&quot;&gt;
 
This is a Block
 
This is a Block
 
&lt;/div&gt;
 
&lt;/div&gt;
 
</code>
 
</code>
 
|}
 
|}

Latest revision as of 13:47, 24 October 2007

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.

Adding the class hiddenblock to your div's will style them like this.


Example 1

example code
Show/Hide Block
This is a Block
<span class="toggleblock" title="test">Show/Hide Block</span>

<div id="test" class="hiddenblock"> This is a Block </div>


Example 2

+ / - displays status of block


example code
Show/Hide Block [+]
This is a Block
<span class="toggleblock" title="test2">Show/Hide Block [<font>+</font><font style="display:none;">–</font>]</span>

<div id="test2" class="hiddenblock"> This is a Block </div>