Skip to main content
SimilarExport ZIP
100%

Manipulating the artifacts

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

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.

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

Gist 4974858be3b0a24bbeed1a8fbbade3be

This example shows a collapsible accordion interface built with React, featuring three panels where the first two contain static placeholder text and the third embeds a user-editable input field. It demonstrates nested interactive components within a Bootstrap-style Accordion using the React framework. The code uses React.createElement and a custom class with getInitialState and handleChange methods to manage the input’s state, updating its value as the user types. The accordion and panel components come from a React library, and the example relies on ReactDOM.render to display the instance.

66ewis
68% 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
67% match
Loading thumbnail…

Gist aac0eca8d414b9a0e631cf8aad0af710

This example demonstrates an interactive React accordion interface where each collapsible panel contains static placeholder text, except for a custom panel that renders a controlled text input. The code uses React’s `createClass` and `setState` to manage the input field’s state, while the accordion relies on React-Bootstrap’s `Accordion` and `Panel` components. It shows how to compose custom child components inside panels while maintaining independent state for nested elements like form inputs. The accordion’s collapsible behavior is driven by React-Bootstrap’s internal event handling, with no external data source or rendering library involved.

66ewis
65% match
Loading thumbnail…

Cards

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

MMTR
65% match
Loading thumbnail…

Manipulating DOM

This example demonstrates how D3.js can dynamically manipulate HTML elements in the DOM. Using d3.select, the code changes text colors, background colors, and list attributes when the "Change!" button is clicked, and resets them with the "Reset!" button. The page includes a heading, paragraphs, and ordered/unordered lists styled via CSS, showing D3's ability to modify existing web content beyond SVG visualization.

SSreenivasulu
64% match
Loading thumbnail…

SHOW HIDE BLOCK JS

This example demonstrates a simple toggle interaction that switches between showing a red and a blue square using a button labeled “Show Red Box” or “Show Blue Box.” The code uses vanilla JavaScript event handling via an `onclick` attribute and manipulates the CSS `display` property to control visibility. It relies on the DOM API methods `getElementById` and `style.display`, with D3.js loaded for potential visualization extensions, though the core behavior is purely HTML and JavaScript.

Llupica.matthew@gmail.com
64% match