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.
This could be generated by a MODX snippet or just stored in a chunk:
<p>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></p>
Because we used
style="display:none;", the additional material will be hidden until the user clicks on read more.
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.
This section has the code above without the tags that make it visible so you can see it in action:
Blah, blah, blah. Read More . . . This is the extra material to be hidden until the user clicks on the Read More button.
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.
<form> <fieldset> <label for="nf_send_test_email"> <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 for="nf_test_email_address">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>
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
Here’s the same code in executable form: