|
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| ==Reflections on trip to Vietnam== | | ==Reflections on trip to Vietnam== |
| | | Hi dog <span class="mw-collapsible mw-collapsed" data-expandtext="View More" data-collapsetext="View Less"> |
| <p>
| | Hidden content that expands when clicked. |
| Here is some text
| | </span> How are you |
| <details style="display: inline;">
| |
| <summary style="display: inline; cursor: pointer; color: blue;">[Read More]</summary>
| |
| <span> - This is the expanded text that appears inline.</span>
| |
| </details>
| |
| </p>
| |
| | |
| | |
| <style>
| |
| .more-content { display: none; }
| |
| #toggle:checked + .more-content { display: inline; }
| |
| #toggle { display: none; }
| |
| .read-more-label { color: blue; cursor: pointer; }
| |
| </style>
| |
| | |
| <p>
| |
| Text... <span id="dots">...</span>
| |
| <span id="more" style="display:none;">hidden content</span>
| |
| <a href="#" onclick="toggleText()" id="link">Read more</a>
| |
| </p>
| |
| | |
| <script>
| |
| function toggleText() {
| |
| // JavaScript logic to toggle display:none/inline on 'more'
| |
| // and switch link text between 'Read more'/'Read less'
| |
| }
| |
| </script>
| |
| | |
| | |
| <p>
| |
| Some initial text...
| |
| <label for="toggle" class="read-more-label">Read more</label>
| |
| <input type="checkbox" id="toggle">
| |
| <span class="more-content">...and here is the expanded text!</span>
| |
| </p>
| |
Latest revision as of 09:52, 26 March 2026
Reflections on trip to Vietnam
Hi dog
Hidden content that expands when clicked.
How are you
