Tools:

Toggling Content

This feature allows content to be hidden when the user first arrives at the webpage, then can click the link to expand the hidden content and reveal it. Clicking the link again hides it again.

You can use any header tag, or a paragraph tag if you wish, to become the toggle "link". The sample code here uses an h5 tag, but you can use h2, h3, h4, or h6 as well.

"View/Hide"

Click on the link to the right

This is the content that hides until the above link is clicked on. Click [view|hide] link again to close.

Copy/Paste the code and replace placeholder text with your own:

<h5>Click on the [view | hide] link</h5>

<div class="toggle">

<p>This is the content that hides until the above link is clicked on.</p>

</div>

"Click the Header"

Click to Expand the Hidden Content

Now click the header again to hide the content.

Copy/Paste the code and replace placeholder text with your own:

<h5 class="toggle-next">Click on this Header</h5>

<div>

<p>This is the content that hides until the above link is clicked on.</p>

</div>

Search This Website

To search only the Information Technology Services website, enter text in the box below, then click 'Search'.

Upcoming Training Opportunities

Contact Us

  • Web Services
  • Prescott Campus, Building 6
  • Monday-Friday, 8am - 5pm
  • Tel: (928) 717-7711
  • Fax: (928) 776-2054
  • webservices@yc.edu