Difference between revisions of "Vietnam - reflections"
From Wiki2
| Line 16: | Line 16: | ||
.read-more-label { color: blue; cursor: pointer; } | .read-more-label { color: blue; cursor: pointer; } | ||
</style> | </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> | <p> | ||
Revision as of 09:07, 26 March 2026
Reflections on trip to Vietnam
Here is some text <details style="display: inline;"> <summary style="display: inline; cursor: pointer; color: blue;">[Read More]</summary> - This is the expanded text that appears inline. </details>
<style>
.more-content { display: none; }
#toggle:checked + .more-content { display: inline; }
#toggle { display: none; }
.read-more-label { color: blue; cursor: pointer; }
</style>
Text... ... <a href="#" onclick="toggleText()" id="link">Read more</a>
<script> function toggleText() {
// JavaScript logic to toggle display:none/inline on 'more' // and switch link text between 'Read more'/'Read less'
} </script>
Some initial text... <label for="toggle" class="read-more-label">Read more</label> <input type="checkbox" id="toggle"> ...and here is the expanded text!
