Pesquisas recentes


Sem pesquisas recentes

Creating content filter buttons for your Guide articles



image avatar

Rob Stack

Zendesk Documentation Team

Publicado 04 de fev. de 2021

In some of our articles, we include a plan filter that displays different content depending on which button you click. A great example of this is our Guide resources article which shows only the articles for the plan you select.

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.


0

16

16 comentários

Victoria Thrash - I ended up abandoning this, unfortunately.

0


Molly Exten did you find a fix that worked for you?

0


Rob Stack the buttons don't work for me either, I've used the default Copenhagen theme and enabled unsafe content, but still no luck. Once I click the buttons, nothing happens...

0


I encountered the exact same issue with the button tag that people are describing above.

In the article Editing the source code of help center articles, it says that the button element is considered an unsafe element. When I enabled the "Display Unsafe Content" option in Guide settings, the buttons stopped disappearing.

Unfortunately, the buttons still don't work as expected. I'll keep investigating this, but I'm surprised the first one bringing this up.

Rob Stack, can you help me understand how clicking on the button makes the text appear? Perhaps with more examples?

0


Hi Tony

None of my buttons work in the article using <button> Ive just used basic Copenhagen theme and not changed anything.

can you advise?

0


Hi Sabena,
 
so, if you are experiencing the same situation as Rebecca, then you may want to get your developers involved to better get where the issue is located.
 
By having a look at the code, everything you see in <html> tags, should be used in the HTML docs, not in the CSS one. CSS is a style sheet language used for describing the presentation of the document.
 
If you are not too sure about it, your developer will surely know what to do.
 
I hope this helps!

0


Rob Stack

I am having the same issue as Rebecca and I am using the trial version to create a prototype for our company.  I am using the Copenhagen theme.  Do I need to add the code in the css file or just the html in the article?

0


Hey Rebeca,
 
This is most likely due to some custom code in your own Guide theme as you mentioned so you may want to get your developers involved to narrow down where the issue is.
 
You could also try switching back to the default Copenhagen theme to see if the code works properly to see if that is the case.
 
I hope this points you in the right direction!

1


Hi Rob Stack I have read your post and I have tested the HTML code on a tester website where it shows exactly what you describe.

I test on our Guide but it doesn't really work, I just get plain text when I publish the article.

I copied and pasted the code on the HTML editor but after I save it, it deletes the button tags - and hence never becomes buttons. Have you heard of such issue before?

Or could it be because we have some custom-made code for the design and layout of our Help center?

I'm very new to this so I really appreciate any input you can offer, thanks!!

0


Thanks, Rob Stack! :) 
Indeed it works.

0


Entrar para comentar.

Não encontrou o que estava procurando?

Nova publicação