FAQ content

FAQs: Hide parts of an individual FAQ, FAQ lists, search results, or FAQ widgets

In this article

One way to customize the appearance of your FAQs is by customizing and hiding certain elements of your FAQs, search results, FAQ lists, and FAQ widgets. Perhaps you want to streamline the look of the FAQ lists on your homepage by removing the Last Updated date and View totals. Or maybe you want don't want to include the account holder that answered an FAQ  (the Answered By details on an FAQ) when your patrons are viewing one. 

In this article, we'll cover the CSS changes that you can make in your LibAnswers site to target and hide parts of your FAQs. You can also make changes to the display of your FAQs through the default and advanced customizations for FAQ groups.


Individual FAQ page elements

Individual FAQ (Question/Answer) pages can be customized to a limited degree when using the default page customization options and to a much greater degree when using advanced customization options via tweaks to the FAQ page templates and the boxes you choose to include on the page. Regardless of the customization option you are using for the FAQ group, the CSS for the FAQ remains the same.

Note: this only covers the basic elements of the Question / Answer details of an FAQ. It does not include the areas for Links & Files and Media that can be added to individual FAQs. Nor does it include the Contact Us and Submit Your Question boxes that can be enabled and disabled with the default customization options, or added/removed when using the advanced customization options.

See the Where your CSS should go section below for information on where to put any custom code.

Question header

The Question header is used to display the text of the FAQ's question.

example of question header

CSS to hide question header:
<style>
.s-la-page-faq .s-la-box-title {
    display: none;
}
</style>

Answer header and body

In the Answer box you can target the Answer header (the Answer label) or the body of the FAQ's answer.

example of answer box

CSS to hide only the Answer header:
<style>
.s-la-faq-answer-header {
    display: none;
}
</style>
CSS to hide Answer body:
<style>
.s-la-faq-answer-body {
    display: none;
}
</style>

Topics

For an FAQ's topics, you can target all topic-related content or the Topics header(the Topics label).

example of topics box

CSS to hide Topics:
<style>
.s-la-faq-topics {
    display: none;
}
</style>
CSS to hide only the Topics header:
<style>
.s-la-faq-topics h3 {
    display: none;
}
</style>

Last Updated, Views, and Answered By

The Last Updated, Views, and Answered By values are the metadata for an FAQ. They can be targeted as a whole or individually.

example of FAQ metadata

CSS to hide all FAQ metadata:
<style>
.s-la-faq-meta {
    display: none;
}
</style>
CSS to hide Last Updated date:
<style>
.s-la-faq-updated {
    display: none;
}
</style>
CSS to hide Views:
<style>
.s-la-faq-views {
    display: none;
}
</style>
CSS to hide Answered By:
<style>
.s-la-faq-owner {
    display: none;
}
</style>

Thumbs Up/Down Voting

If you would prefer not to allow patrons to vote on whether an FAQ was helpful or not, you can hide the Thumbs Up and Thumbs Down voting options.

example of FAQ voting options

CSS to hide voting options:
<style>
#s-la-vote {
    display: none;
}
</style>

Print and Social Media icons

The Print, Twitter, and Facebook icons can be targeted as a whole or individually.

example of FAQ metadata

CSS to hide all icons:

Note: this will also hide the Edit FAQ link that is visible when viewing an FAQ while logged into LibAnswers.

<style>
.s-la-faq-actions .list-inline {
    display: none;
}
</style>
CSS to hide Print icon:
<style>
#s-la-faq-printlink {
    display: none;
}
</style>
CSS to hide Twitter icon:
<style>
#s-la-faq-tweetlink {
    display: none;
}
</style>
CSS to hide Facebook icon:
<style>
#s-la-faq-fblink {
    display: none;
}
</style>

Comments section

If you would prefer not to allow patrons to leave comments on your FAQs, you can hide that section from your public FAQ pages. This will effectively disable public commenting.

There are a couple of ways you can do this, depending upon which page customization options you are using.

If a group is using the default page options

When the advanced customization options are disabled for your FAQ group's pages, you can hide the Comments section by adding some custom CSS code.

<style>
#s-la-page-column-1 .s-la-box-position-2 {
    display: none;
}
</style>
If a group is using the advanced page options

When a group has the advanced customization options enabled, you can remove the Comments section with a quick change to the FAQ page's template.

  1. Go to Admin > FAQ Groups
  2. Edit your group.
  3. Click on the Pages tab.
  4. Edit the FAQ Page by clicking on its edit () icon in the Actions column.
  5. The Comments section is typically contained within its own box (look for a box containing the {{{comments}}} token, highlighted in the screenshot below). To remove it, simply click on the delete () icon in that box's header.
    • It's possible you may find that token in a box containing the code for the entire FAQ template.
    • In this case, you may only want to remove the {{{comments}}} token (as well as the {{commentcount}} token, if it was being used) from the rest of the code in that box.
  6. When finished, click on the back () button at the top of the page to return to your group's settings.

The option to remove the Comments box on the FAQ Page editor 


FAQ lists

FAQ lists, like those that you will find on your LibAnswers homepage, can be targeted with CSS to hide each aspect of the FAQs listed within them.

See the Where your CSS should go section below for information on where to put any custom code.

example of FAQ list

CSS to hide all FAQ list metadata:
<style>
.s-la-faq-listing-meta {
    display: none;
}
</style>
CSS to hide Last Updated date:
<style>
.s-la-faq-listing-updated {
    display: none;
}
</style>
CSS to hide Topics:
<style>
.s-la-faq-listing-topics {
    display: none;
}
</style>
CSS to hide Views:
<style>
.s-la-faq-listing-views {
    display: none;
}
</style>
CSS to hide the divider between metadata values:
<style>
.s-srch-result-meta .divider {
    display: none;
}
</style>

Search results

When viewing the search results for FAQs, you can hide the Last Updated date, Topics, and the filters (for topics and keywords).

See the Where your CSS should go section below for information on where to put any custom code.

example of FAQ search results

CSS to hide all FAQ search results metadata:
<style>
.s-srch-result-meta {
    display: none;
}
</style>
CSS to hide Last Updated date:
<style>
.s-srch-result-date {
    display: none;
}
</style>
CSS to hide Topics:
<style>
.s-srch-result-subj {
    display: none;
}
</style>
CSS to hide the divider between Last Updated date and Topics:
<style>
.s-srch-result-meta .divider {
    display: none;
}
</style>
CSS to hide all search filters:
<style>
.s-srch-facet {
    display: none;
}
</style>
CSS to hide Topics filter:
<style>
#s-srch-facet-0-topics {
    display: none;
}
</style>
CSS to hide Keywords filter:
<style>
#s-srch-facet-0-keywords {
    display: none;
}
</style>
CSS to hide Groups filter:
<style>
#s-srch-facet-0-g {
    display: none;
}
</style>

FAQ widgets

FAQ widgets can be used to display lists or the full-text of a single FAQ outside of your LibAnswers site. As with the FAQ and list displays within LibAnswers, you can apply CSS to the widgets that you generate. The CSS you add to hide the elements of the widget should be added to the Custom CSS space within the widget builder -- without a wrapping <style> tag. For more information on styling FAQ widgets, see the Style and Appearance section of the FAQ widgets FAQ.

FAQ list widgets

All of the list type widgets (recent, popular, by topic, by keyword, and custom) use the same IDs and classes.

example of FAQ list widget results

CSS to hide border around the widget:
.s-la-widget-embed {
    border: none;
}
CSS to hide all FAQ list metadata:
.s-la-faq-listing-meta {
    display: none;
}
CSS to hide Last Updated date:

.s-la-faq-listing-updated {
    display: none;
}
CSS to hide Topics:
.s-la-faq-listing-topics {
    display: none;
}
CSS to hide Views:
.s-la-faq-listing-views {
    display: none;
}
CSS to hide the divider between metadata values:
.s-srch-result-meta .divider {
    display: none;
}

Single full FAQ entry widget

The single full entry widget type will display the question, answer, and topics for an FAQ

example of FAQ list widget results

CSS to hide border around the widget:
.s-la-widget-embed {
    border: none;
}
CSS to hide Question header:
.s-la-widget .s-la-widget-header {
    display: none;
}
CSS to hide the Answer header:
.s-la-widget .s-la-faq-answer h2 {
    display: none;
}
CSS to hide Topics:
.s-la-faq-listing-topics {
    display: none;
}
CSS to hide only the Topics header:
.s-la-faq-listing-topics .metalabel {
    display: none;
}

Where your CSS should go

For any of the above CSS code for hiding parts of an FAQ (except for FAQ widgets), you can add your code at the system or group-level.

If you would like to hide these options only in a specific group:

  1. Go to Admin > FAQ Groups.
  2. Edit the group
  3. Under the General tab, click on the Look & Feel panel.
  4. Paste the above code in the Custom JS/CSS text box.
  5. Save your changes.

Or, you can apply this to all groups at once (as long as they are configured to include your system-level Custom JS/CSS code):

  1. Go to Admin > System Settings.
  2. Click on the Look & Feel tab.
  3. Paste the above code in the Custom JS/CSS text box.
  4. Save your changes.

Reminder: when adding more than one CSS rule, add them all within the same <style> tag. You do not need to have each rule added separately.