Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
OOghenemaro Anuyah
Last edited Apr 9, 2021
Created on Apr 8, 2021
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates interactive manipulation of a text paragraph’s style and visibility through three buttons. The interface uses plain HTML, CSS, and JavaScript, with inline `onclick` handlers calling custom functions that directly modify the element’s `style` properties, such as `color`, `fontSize`, `fontStyle`, and `visibility`. No external libraries or frameworks are used; the page consists of a single `index.html` file with embedded scripts.

Wwoojinsong
75% 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
75% match
Loading thumbnail…

Table of Contents

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.

AAnnie Ulichney
73% 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
71% match
Loading thumbnail…

Untitled

This example demonstrates a responsive website layout built with HTML5 and CSS, featuring a navigation bar, introductory image, and content sections for boxes, events, and projects. The page uses semantic structural elements like `header`, `nav`, `main`, and `section` tags to organize material, with styling applied through a CSS framework. The design incorporates interactive buttons and links, and the visual hierarchy relies on header tags and horizontal rules. The layout is defined directly in the HTML structure, with no JavaScript libraries or data-viz libraries present.

DDannwiz
70% 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
70% match
Loading thumbnail…

Untitled

This example displays a plain HTML page that uses CSS and JavaScript to render content within a React framework. The code sets up a minimal document structure, with the page body containing only the closing tags, indicating that all visual elements are generated dynamically. It serves as a bare-bones starting point for web-based visualization, demonstrating the integration of foundational web technologies with React, though no specific data or rendering libraries are invoked in the visible source.

KKulandai Yesu M
70% match
Loading thumbnail…

Untitled

This example renders a collapsible radial tree using D3 v3, with nodes and animated links overlaid on a static HTML page. The visualization uses the D3 tree layout to position hierarchical data, while clickable node circles and gray connecting links are styled via CSS classes. The code imports the d3.v3 library and renders the diagram inside a `#tree-container` div, combining React-like structure with direct DOM manipulation.

Sshubham693
70% match