KB User's Guide - Advanced HTML - Show/Hide Detailed Steps

Example: How to Set Up a Guinea Pig Cage

Below you find will the basic steps for this process. Please click on the button to view detailed steps and images.

1. Decide what type of cage you will be using and put it in a safe location.

   There are many different types of cages to choose from, and it's important to know the pros and cons of each. Some popular cage types are shown below, but you can find more information here: http://www.drsfostersmith.com/pic/article.cfm?articleid=2587
   

2. Choose the type of bedding you would like to use and put it in the bottom of the cage.

   Choosing the right bedding is beneficial to both you and your guinea pig. Some types of bedding control odor better, others are easier to clean, and others are more colorful, but the most important thing is that the bedding is safe for your pet!

   You can a useful guide to choosing bedding here: https://www.guineapigcages.com/bedding.htm

   • Important: You should never use cedar bedding, as this can be toxic to your guinea pig.

   A great alternative to using traditional bedding is to make a fleece lining for your cage. Tips on doing this can be found here: http://www.calicavycollective.com/2014/03/guinea-pig-101-fleece-bedding-guide.html

   In addition to being comfier for your piggy, just look how cute fleece can make your cage!
   

3. Get a water bottle, fill it up, and attach it to the side of the cage.

4. Get a heavy ceramic food dish, place it in the cage, and fill it with guinea pig pellets.

5. Attach a hay feeder to the side of the cage and fill it with hay.

6. Place a hidey-house or another type of shelter in the cage.

7. Add any other toys, treats, or chews you have to the cage.

   There are a wide variety of fun treats and toys for your guinea pig. With all of these, it's a good idea to research them first to make sure they are safe and healthy.
   

8. Add your piggy!

   

How to Add a Show/Hide Button to your KB Doc

1. In the doc Body, add the following wherever you would like the show/hide button to appear:

        <input id="hideshow" value="Click to show/hide detailed steps" type="button"/>

   If you would like the change the text displayed for the button, simply update the text for the value as desired.
2. In the doc Body, list out the complete set of steps. For the parts of each step that you would like to have hidden initially, add class="content" to the element tag, or wrap the text and/or images in a <div class="content"> tag, e.g.:

   
        <li>
          <p>This text will be displayed when the page loads.</p>
   
          <p class="content">This text will be hidden until the button is pressed, as will the images in the following line.</p>
   
          <div class="content">
            <img src="/images/group41/44765/hiddenimage.jpg" title="Image title" alt="Alt text" height="100" width="200" />
            <img src="/images/group41/44765/hiddenimage2.jpg" title="Image title" alt="Alt text" height="100" width="200" />
          </div>
        </li>
   

3. In the JavaScript/CSS field, add the following CSS and JS:

   
   <style>
   .content {display:none;}
   </style>
   
   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   <script>
   jQuery(document).ready(function(){
           jQuery('#hideshow').on('click', function(event) {        
                jQuery('.content').toggle('show');
           });
       });
   </script>