Creating content filter buttons for your Guide articles

So how can you set these up for yourself?

Filter buttons like these are not included in Guide. However, you can add them using a little HTML trickery. In the rest of this tip, you'll work through an example.

Step 1: Set up the buttons

1. First, you'll add some buttons. Switch to the HTML view of your article (that's the button at the end of the toolbar ).
2. Next, add the following HTML code at the position you want to see the buttons (usually near the beginning of the article):

   <div id="plan-filter">
   <h4>Select your plan to filter resources:&nbsp; &nbsp;</h4>
   <h4>
   <span style="vertical-align:text-bottom"><button class="button plan-name" name="plan1" type="button">Plan 1</button>&nbsp;<button class="button plan-name" name="plan2" type="button">Plan 2</button></span>
   </h4>
   </div>

   Notice that for each button you want, you include the following HTML:

   <button class="button plan-name" name="button ID" type="button">button label

   Where button ID is a unique name for the button (you'll need that in the next section) and button label is the actual text to be displayed on the button. You can include as many buttons as you want.
3. You'll now be looking at a set of buttons like this:
   
   You can click them, but not much will happen just yet. In the next section, you'll learn how to "wire up" the buttons to make them display only the content you want.

Step 2: Wire up the buttons

Now, wire up the buttons so that they do something useful. For this example, you'll use the following logic:

If the Plan 1 button is clicked, display "You clicked Plan 1".

If the Plan 2 button is clicked, display "You clicked Plan 2".

To wire up the buttons

• Add a HTML class to each element that contains content specific to each plan. The class consists of the text "plan-" and the button ID you created earlier. Using the example code you used for the buttons, if you want to display content only when "Plan 2" is clicked, use the following code:

  <p class="plan-plan1" style="display:none">You clicked Plan 1</p>
  <p class="plan-plan2" style="display:none">You clicked Plan 2</p>

The style="display:none" setting ensures the text is not displayed by default until you click the button.

Step 3: Test your buttons

At this point, save your article and open a preview or published version of it. Then, click away!

If you have any similar tricks or tips, please let us know. We'd love to hear them.