Make Things Appear and Disappear without JQuery in MODX

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.

MODX logo

The HTML

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 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:

Blah, blah, blah. Read More . . .

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 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>

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.


For more information on how to use MODX to create a web site, see my web site Bob’s Guides, or
better yet, buy my book: MODX: The Official Guide.

Looking for quality MODX Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , | Posted under MODX, MODX | RSS 2.0

Author Spotlight

Bob Ray

Bob Ray

I am the author of MODX: The Official Guide and over 30 MODX add-on components. I host Bob's Guides, a source of valuable information for MODX users, and I've been very active in the MODX Forums with over 14,000 posts.

Leave a Reply

Your email address will not be published. Required fields are marked *


4 − 2 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>