|
|
| Line 1: |
Line 1: |
| ==Reflections on trip to Vietnam== | | ==Reflections on trip to Vietnam== |
|
| |
| <p>
| |
| Here is some text
| |
| <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>
| |
Revision as of 09:40, 26 March 2026
Reflections on trip to Vietnam
