This is a simple web project that demonstrates how to toggle the visibility of a paragraph of text using a button. It's a great example for learning basic front-end development with HTML, CSS, and JavaScript.
-Toggle Functionality: Click the button to show or hide the paragraph.
-
Dynamic Button Text: The button's text automatically updates to "Hide" when the paragraph is visible and "Show" when it is hidden.
-
Clean Interface: The project uses minimal styling to keep the focus on the core JavaScript logic.
-
HTML: Structures the content of the page.
-
CSS: Provides basic styling.
-
JavaScript: Handles the toggle logic and dynamic text changes.
Simply open the index.html file in any modern web browser to run the project. No server is required.
- You can easily modify this project to suit your needs:
Change the text: Edit the paragraph content inside the
tag in the HTML file.
-
Change the initial state: Set the initial style of the paragraph to display: block; in the CSS to have it visible from the start.
-
Add more paragraphs: Add multiple paragraphs and corresponding buttons by duplicating the HTML structure and modifying the JavaScript to handle each toggle event.