Show or Hide Terms and other Content

Friday, Jun 22, 2018

It is not possible to include javascript code directly within content created by CourseSales.com however it is possible to specify styles and then add code to external files that are used to provide additional functionality.

To hide some text just below a ‘Click to read more’ link eg Terms & Conditions or catalog item description include the following:

The content within CourseSales.com should look like this (view the source of the content/description to see the div tags):

<p>
  <a class="toggle-trigger">
    Click to read more (or less)..
  </a>
</p>
<div class="toggle-wrap">
  Enter content here...
</div>

The styles (CSS) file should include:

/* hide content by default  and display as blue underlined text*/
.toggle-wrap { display:none; }
.toggle-trigger {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}
.toggle-trigger:hover {
     text-decoration:none;
}

The javascript file should include:

$(document).ready(function() {
    $(".toggle-trigger").click(function() {
        $(this).parent().nextAll('.toggle-wrap').first().toggle('slow');
    });
});

This is part of the customisation you can do to your public and private (admin) pages on CourseSales.com. Follow the links below to view more of these.