Skip to main content
SimilarExport ZIP
100%

Table of Contents

✓ Published0🌍 Public
AAnnie Ulichney
Last edited Feb 12, 2021
Created on Feb 11, 2021
Forked from HTML Starter

This example shows a collapsible table of contents for a book’s chapters and sections. Clicking a chapter heading toggles the visibility of its nested subsections, with a plus or minus sign indicating the expanded state. The page uses jQuery’s `click` handler, `fadeToggle`, and DOM traversal to animate the hide-and-show behavior, while CSS controls the heading colors, margins, and dotted borders. The content is hardcoded in the HTML, and no external data source is loaded.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

ISC Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates collapsible content sections controlled by clickable buttons. The interface presents a set of headers, each of which can be expanded or collapsed to reveal or hide a block of text below it. The implementation uses vanilla JavaScript event listeners to toggle CSS classes and inline `display` styles, responding to user clicks on elements with the class `collapsible`. The page is built with plain HTML and CSS, with styling that changes the button background color on hover and when active, and sets the hidden content area to a specific width with pink text on a white background.

OOghenemaro Anuyah
73% match
Loading thumbnail…

Manipulating the artifacts

This interactive HTML page demonstrates an accordion-style interface for concealing and revealing artifact content. Two header divs, labeled “Target name,” toggle the visibility of their adjacent content sections when clicked. The example uses jQuery’s `slideToggle()` method to animate the show/hide behavior and updates the header text based on the content’s visibility state, although both states display the same label. Styling is applied via an external CSS file, with inline styles for borders, while the page loads the jQuery library from Google’s CDN.

OOghenemaro Anuyah
67% match
Loading thumbnail…

Collapsible List 2

This example demonstrates a collapsible list that expands and collapses nested tree data on click. It uses d3’s `select`, `selectAll`, `data`, `enter`, and `append` methods to bind an array of objects (with “Letter” and “Number” parent nodes) to HTML `li` elements inside a `ul`. Clicking a parent toggles its child items by adding or removing a nested `ul` via event handlers `expand` and `collapse`. The visualization relies on D3’s data join to manage the dynamic list structure.

BBenjamin Ogorek
66% match
Loading thumbnail…

Plantilla Tabla simple

This example presents a simple, responsive HTML table that lists dated entries with expandable titles. Each title is a button that toggles a hidden description panel below it, allowing users to reveal additional details on demand. The table uses CSS for striped row highlighting and a two-column layout, while vanilla JavaScript adds the accordion-style interactivity. The page is generated with Pandoc and relies on plain HTML, CSS, and JavaScript without external frameworks.

HHéctor del Castillo
65% match
Loading thumbnail…

Untitled

This example demonstrates a simple interactive reveal mechanism using plain HTML, CSS, and JavaScript. The page displays a heading that, when clicked, toggles the visibility of a hidden paragraph. The code uses the Document Object Model (DOM) API via `getElementByClassName` and an inline `onclick` event handler to switch between two CSS classes, `reveal` and `revealed`, which control the `display` property of child elements. This minimal approach highlights basic DOM manipulation and event handling without external libraries.

NNSHkw
65% match
Loading thumbnail…

0414_html

This example demonstrates a simple HTML page with a bookmark-style navigation feature that links to specific sections such as name, address, phone number, and notes. The page uses anchor tags (`<a href="#...">`) to jump between content areas, with each section containing placeholder text and a link back to the top. It relies on plain HTML and CSS for structure and styling, with JavaScript not actively used in the visible code. The layout includes centered headers, an article navigation bar, and multiple information blocks marked by named anchors or IDs.

CChomin21
64% match
Loading thumbnail…

Untitled

This example presents a schedule of mathematics seminars, listing dates, speakers, and talk titles in an HTML table. The table includes expandable accordion panels for details and external links to videos and reference materials. It uses a CSS tab interface to switch between semesters, with JavaScript-free tab switching via the `:checked` pseudo-class and radio inputs. The page relies on HTML tables, the `details` analogy through custom accordion buttons, and styles from inline `<style>` blocks for layout and interaction.

HHéctor del Castillo
64% match
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This example displays a collapsible tree of hierarchical data as colored, labeled boxes connected by curved links. Clicking a node toggles its children in an animated SVG layout. The visualization is built with D3.js v3, loading data from a JSON file and rendering nodes and tooltips using SVG elements. It includes zoom and drag interactions, with distinct colors for each node type.

Bbeiker71
63% match