Closeable Tabs Module

The Closeable Tab widget allows tabs to be removed. (related blog post)

Features

An Example :

Click on the close icon to remove a tab. Note: At the moment, it is possible to close all tabs, which results in a module with no tabs. A possible solution for this is to remove the module once all tabs have been closed.

This example is also draggable, using the draggable specific initialisation properties.

  • Tab A

    Donec ut ante nec sem pretium dictum. Fusce at elit ac orci laoreet sodales. Suspendisse scelerisque massa id est. Proin arcu lectus, suscipit a, volutpat id, scelerisque convallis, turpis. Etiam dignissim. Curabitur cursus varius quam. In porttitor lacus non enim. Integer eget massa. Praesent mauris turpis, tempor in, dapibus malesuada, egestas rutrum, tellus. Nam id tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Aliquam eget eros a metus rhoncus eleifend. Nullam volutpat. Aenean dictum condimentum massa. Donec tortor. Vestibulum consequat nisi quis orci. Sed convallis. Phasellus ut neque ac erat nonummy elementum. Nulla eget dolor vel est pellentesque vulputate. Quisque ornare ipsum vitae lacus. Aliquam aliquet, leo ac sagittis consectetuer, ipsum odio aliquet quam, non interdum ligula enim ut urna. Donec purus. Pellentesque nonummy tempor justo. Ut ultrices. Sed lorem enim, ultricies vitae, consectetuer volutpat, eleifend nec, risus. Pellentesque turpis. Nullam nec elit quis nunc rhoncus imperdiet. Curabitur mi velit, mollis vel, imperdiet ac, porttitor dapibus, felis. Suspendisse ipsum mauris, tincidunt vel, fermentum in, porta ut, dolor. Vivamus placerat ultricies ante.

  • Tab B

    Praesent feugiat turpis tincidunt diam. Aliquam elementum ante in felis. Pellentesque et ligula quis elit adipiscing lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas viverra, arcu et lobortis adipiscing, mauris urna pretium sapien, id consectetuer lacus turpis ac nibh. Proin scelerisque. Nullam lobortis. Duis faucibus risus nec elit. Ut auctor blandit pede. Suspendisse pretium. Suspendisse potenti. Sed vehicula. Integer pulvinar viverra ante. Nullam a tortor. Maecenas lacinia. Suspendisse pretium. Suspendisse potenti. Sed vehicula. Integer pulvinar viverra ante. Nullam a tortor. Maecenas lacinia.

  • Tab C

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis porttitor sapien ac diam. Vivamus convallis. Praesent et diam sed lectus dignissim sagittis. Integer dictum purus a est condimentum bibendum. Etiam dignissim. Cras rutrum orci et orci. Praesent feugiat est vel ante. Sed nisi justo, nonummy id, ornare quis, facilisis ac, risus. Nam at quam. Integer eu sapien sed leo pretium aliquam. Praesent vel elit. Ut eu ipsum. Nullam congue vehicula neque. Aenean iaculis erat nec neque. Cras blandit mi ultricies dui. Proin leo dolor, rutrum blandit, viverra id, rutrum vitae, odio. Phasellus id tortor.

Markup

The html markup for closeable tabs is exactly the same as standard tabs and looks like this:

Configuration

The initiating javascript looks like this: