Hello, World!
Toggle display
This HTML page uses inline JavaScript (an onclick event) to toggle the CSS display property to make this <h3> block of text appear and reappear. This page also uses a <style> section in the HTML to apply CSS formatting to elements in the page. This could also have been done with a separate CSS file, but it can be useful for everything to be contained in a single file. The HTML for this page can be seen here (view the source code).
The source code for this HTML page (including YAML header) is:
---
header: true
footer: true
title: Simple page with CSS+JS button
---
<style>
.cdmdemo-page {
padding: 15px;
}
.cdmdemo-page > h3 > a {
font-size: 0.875rem;
text-decoration: underline;
}
.cdmdemo-code {
font-family: monospace, monospace;
}
</style>
<div class="shared-box">
<h2>Hello, World!</h2>
<br/>
<a href="#" onclick="var el=document.getElementById('show-hide');
if (el.style.display === 'none') {el.style.display='block';}else{el.style.display='none';}"
class="CollectionLanding-landingBrowseButton cdm-btn btn btn-lg btn-primary">Toggle display</a>
<h3 id="show-hide" style="display: none">This HTML page uses inline JavaScript
(an <i>onclick</i> event) to toggle the CSS <i>display</i> property to make this
<h3> block of text appear and reappear. This page also uses a <style> section in the HTML to
apply CSS formatting to elements in the page. This could also have been done with a separate CSS file,
but it can be useful for everything to be contained in a single file. The HTML for this page can be seen
<a href="https://cdmdemo.contentdm.oclc.org/customizations/global/pages/helloworld-cssjs.html">here</a>
(view the source code) and the external CSS is for the <i>shared-box</i> class in
<a href="https://cdmdemo.contentdm.oclc.org/customizations/global/cdmdemo-aggregate.css">this file</a>.
<br/>
<br/>
The source code for this HTMl page (including YAML header) is:
<br/>
<br/>
<pre/> <!-- source removed to avoid recursion -->
</h3>
</div>