[ Web Proxy ]
URL:
Viewing: https://javascript.info/task/selectable-list [Back]  [Original]

Selectable list
EN

We want to make this open-source project available for people all around the world.

Help to translate the content of this tutorial to your language!

    Search on Javascript.info:
    Search in the tutorial:
    Light themeDark theme
    DanskEnglishEspaolFranaisIndonesiaItalianoTrkeOzbek
    back to the lesson

    Selectable list

    importance: 5

    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 Ctrl (Cmd for Mac), then the selection is toggled on the element, but other elements are not modified.

    The demo:

    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.

    Open a sandbox for the task.

    solution

    Web Proxy Viewer  |  New URL  |  Original Page