Sometimes, you just want to hide some text until the user clicks on a something. You don’t want any fancy effects, and you don’t really need JQuery. Maybe it’s a subsidiary form field that shouldn’t show up unless the user clicks on a checkbox, or maybe it’s just some “read more...” text to be shown to interested readers.
You can do this quite easily with straight JavaScript. In fact, you don’t even need any CSS for it. Here’s an example of a typical “Read More” effect.
The HTML
This could be generated by a MODX Snippet or just stored in a Chunk:
Blah, blah, blah.
<span id="read_more" style="color:blue; cursor:pointer;"
onClick="toggle('additional');"> Read More . . . </span>
<span id="additional" style="display:none;">This is the extra material
to be hidden until the user clicks
on the Read More button.</span>Because we used style="display:none;", the additional material will be hidden until the user clicks on read more.
The JavaScript
<script type="text/javascript">
function toggle(divId) {
var e = document.getElementById(divId);
var rm = document.getElementById('read_more');
if(e.style.display === 'none') {
e.style.display = 'inline';
rm.style.display = 'none';
}
}
</script>The example above will show the additional material inline and hide the “Read More” line when the user clicks on “Read More”. It’s a one-way transform. Once the additional material is visible, the “Read More” link is gone, so there’s no way to hide the extra material without reloading the page. You could add a button that would toggle the additional text in and out, but we don’t really need that here.
Try It
This section has the code above without the tags that make it visible, so you can see it in action:
Form Example
Let’s look at another example that toggles the visibility of an extra form field when the user selects or deselects a checkbox. We’ve renamed the toggle function to toggle2 so it won’t conflict with the other example. In this case clicking on the “Send Test Email” checkbox reveals another input field to enter an email address. The revealed input field is indented a little to help the user see that it has been added.
The HTML
<form>
<fieldset>
<label>
<input type="checkbox"
id="nf_send_test_email"
name="nf_send_test_email"
OnClick="btoggle('nf_single_user');"
/>
Send Test Email?
</label>
<br/><br/>
<div id="nf_single_user" style="display:none;padding-left:30px;">
<label>Email Address for Test<br/>
<input type="text" size="50" id="nf_test_email_address"
name="nf_test_email_address" value=""/>
</label>
<br/><br/>
</div>
</fieldset>
</form>The JavaScript
This code is very similar to the example above. It no longer toggles the trigger because we want the checkbox to remain visible at all times. This code is a true toggle, when the user clicks on the checkbox, it reverses the current state of the additional input field. Checking the box shows the additional field. Unchecking it hides the field. That’s why it’s important to have that field hidden by the style attribute when the form is first loaded. In this example, we’re also setting the display style to block instead of inline.
<script type="text/javascript">
function btoggle(divId) {
var e = document.getElementById(divId);
if (e.style.display == 'none') {
e.style.display = 'block';
} else {
e.style.display = 'none';
}
}
</script>Try It
Here’s the same code in executable form:
Summing Up
Sometimes you want a fancy animated effect, which fades in or slides in a particular direction. In that case, it’s hard to beat JQuery. At other times, though, you just want a quick way to hide and reveal bits of content. In those cases, it’s fairly simple to do the job with straight JavaScript and avoid the overhead of JQuery.
Bob Ray is the author of the MODX: The Official Guide and dozens of MODX Extras including QuickEmail, NewsPublisher, SiteCheck, GoRevo, Personalize, EZfaq, MyComponent and many more. His website is Bob’s Guides. It not only includes a plethora of MODX tutorials but there are some really great bread recipes there, as well.