Skip to main content
SimilarExport ZIP
100%

SHOW HIDE BLOCK JS

✓ Published0🌍 Public
Llupica.matthew@gmail.com
Last edited Jan 25, 2022
Created on Jan 24, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

animating flexbox

A button labeled "Remove blocks" triggers a two-stage animation that collapses four square divs within a flexbox container. The example demonstrates how D3.js transitions sequence opacity changes and dimensional resizing, with the divs first fading out over 300 milliseconds, then shrinking their width and margins to zero over 700 milliseconds. The animation toggles between the original and collapsed states with each button click, showcasing the interplay between CSS flexbox layout and D3's transition API for managing HTML elements.

KKaustav Sen
69% 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
68% match
Loading thumbnail…

onclick changing background color

This example demonstrates how clicking anywhere on an HTML page changes the background color to yellow, while a specific button turns blue upon page load. The page contains a simple message, a styled button, and uses vanilla JavaScript with inline `onclick` event handling and `document.getElementById` to manipulate the DOM. It relies on the Window object's `onclick` property and element style properties (`style.backgroundColor`) rather than any external libraries or frameworks, though it references a React starter as an alternative approach.

NNita
66% 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
66% match
Loading thumbnail…

Fork of HTML Starter

This example displays a grid of 100 circular blue elements that turn red on hover, demonstrating how CSS styling and JavaScript interact to create interactive visuals. The code uses vanilla JavaScript with the Document Object Model (DOM) API, specifically `document.createElement` and `document.body.append`, to generate the circles dynamically. Styling relies on CSS flexbox for layout, `border-radius` for round shapes, and the `:hover` pseudo-class to change background color. The visualization shows a simple, responsive pattern where each circle responds independently to user interaction, illustrating basic DOM manipulation and event-driven styling without external libraries.

YYiorgos Bagakis
65% match
Loading thumbnail…

Hello HTML

This example shows a single red square rendered in SVG, which transitions to green with a thicker border when hovered. The page uses plain HTML, CSS, and JavaScript, with a 1000x1000 SVG element containing a `<rect>`. The CSS defines the shape's stroke, fill, and a 3-second transition on those properties, triggered by the `:hover` pseudo-class. No external libraries are used; it demonstrates basic SVG and CSS interactivity.

Ssreerajchundayil
65% match
Loading thumbnail…

D3 JS test

This example demonstrates a minimal web page that uses D3.js to change the background color of an SVG element to red. The page contains a simple heading and an SVG element, with JavaScript importing the `select` function from D3 and applying a CSS style to that SVG. It serves as a basic test that D3.js is correctly integrated and can manipulate SVG elements within an HTML document.

Ssudiptaroyece
65% match
Loading thumbnail…

box test

This example demonstrates basic chart interactivity by rendering a single green circle in D3.js version 7, which changes to magenta on mouse hover. The visualization uses D3's `select` and `pointer` functions to implement a custom tooltip that displays the circle's data, containing key-value pairs like "hello: world" and "yo: dog". The tooltip dynamically positions itself near the cursor, flipping to the opposite side of the screen edges based on mouse coordinates, while the circle's fill color resets when the mouse leaves. The code renders to an SVG canvas using the unpacked D3 library.

Aadventuresenglish.info@gmail.com
64% match