Bug Tracker

Ticket #3809: collapsible.list.take.4.html

File collapsible.list.take.4.html, 2.6 KB (added by ManFred, 13 years ago)

From jquery in action book

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3  <head>
4    <title>Collapsible List &mdash; Take 4</title>
5    <link rel="stylesheet" type="text/css" href="../common.css">
6    <script type="text/javascript"
7            src="../scripts/jquery-1.2.6.js"></script>
8    <script type="text/javascript">
9        $(function(){
10                //Initialize
11                $('li:has(ul)').click(function(event){
12                        if (this == event.target) {
13              if ($(this).children().is(':hidden')) {
14                $(this).css('list-style-image','url(minus.gif)').children().slideDown();
15              }else {
16                $(this).css('list-style-image','url(plus.gif)').children().slideUp();
17              }
18            }
19            return false;
20                }).css({cursor:'pointer','list-style-image':'url(plus.gif)'}).children().hide();
21        $('li:not(:has(ul))').css({
22                cursor: 'default','list-style-image':'none'
23        });
24      });
25    </script>
26    <style>
27      fieldset { width: 320px }
28    </style>
29  </head>
30
31  <body>
32    <fieldset>
33      <legend>Collapsible List &mdash; Take 4</legend>
34      <div id="tree">
35      <ul>
36        <li><input type="checkbox" id="1" name="1" value="1" />Item 1</li>
37        <li><input type="checkbox" id="2" name="2" value="2" />Item 2</li>
38        <li>
39          <input type="checkbox" id="3" name="3" value="3" />Item 3
40          <ul>
41            <li><input type="checkbox" id="31" name="31" value="31" />Item 3.1</li>
42            <li>
43              <input type="checkbox" id="32" name="32" value="32" />Item 3.2
44              <ul>
45                <li><input type="checkbox" id="321" name="321" value="321" />Item 3.2.1</li>
46                <li><input type="checkbox" id="322" name="322" value="322" />Item 3.2.2</li>
47                <li><input type="checkbox" id="323" name="323" value="323" />Item 3.2.3</li>
48              </ul>
49            </li>
50            <li>Item <input type="checkbox" id="33" name="33" value="33">3.3</li>
51          </ul>
52        </li>
53        <li>
54          <input type="checkbox" id="4" name="4" value="4">Item 4
55          <ul>
56            <li><input type="checkbox" id="41" name="41" value="41">Item 4.1</li>
57            <li>
58              <input type="checkbox" id="42" name="42" value="42">Item 4.2
59              <ul>
60                <li><input type="checkbox" id="421" name="421" value="421">Item 4.2.1</li>
61                <li><input type="checkbox" id="422" name="422" value="422">Item 4.2.2</li>
62              </ul>
63            </li>
64          </ul>
65        </li>
66        <li><input type="checkbox" id="5" name="5" value="5">Item 5</li>
67      </ul>
68      </div>
69    </fieldset>
70  </body>
71</html>