◐ Shell
reader mode source ↗
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@

<body>

Click on a list item to select it.
<br>

<ul id="ul">
<li>Christopher Robin</li>
<li>Winnie-the-Pooh</li>
<li>Tigger</li>
<li>Kanga</li>
<li>Rabbit. Just rabbit.</li>
</ul>

<script>
Expand All @@ -39,7 +39,7 @@

}

// prevent unneeded selection of list elements on clicks
ul.onmousedown = function() {
return false;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,19 @@

<body>

Click on a list item to select it.
<br>

<ul id="ul">
<li>Christopher Robin</li>
<li>Winnie-the-Pooh</li>
<li>Tigger</li>
<li>Kanga</li>
<li>Rabbit. Just rabbit.</li>
</ul>

<script>
// ...your code...
</script>

</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ importance: 5

---

# Selectable list

Create a list where elements are selectable, like in file-managers.

- A click on a list element selects only that element (adds the class `.selected`), deselects all others.
- If a click is made with `key:Ctrl` (`key:Cmd` for Mac), then the selection is toggled on the element, but other elements are not modified.

The demo:

[iframe border="1" src="solution" height=180]

P.S. For this task we can assume that list items are text-only. No nested tags.

P.P.S. Prevent the native browser selection of the text on clicks.
Loading
Toggle all file notes Toggle all file annotations