Bootstrap Style Within Knowledgebase

[WHMCS JimmyW]

Often, when creating helpful articles within the knowledgebase, it can be difficult to provide a large amount of information in such a small form and still ensure it is readable.

In past experience, there has been occasions when a certain article needed multiple outcomes based on a clients decision.

When i have been faced with this scenario, i have added a Bootstrap accordian style element into the knowledgebase article, allowing me to add styling that hides the unneeded information untill it is called by the user.

WHMCS its self uses mutiple elements from the Bootstrap library. Using the Bootstrap 4 library, it is possible to add cetain styles and elements into the knowledgebase  textfield.

The best way to implement this would be click the “Enable/disable Rich Text Editor” button. From this point you can add your HTML and call most of the Bootstap tools. In this particular scenario, i called the accordion class as seen below.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

After all of this is added to the KB article, saving would then result in the article contents being dislayed within an accordian whenever a client views the article, allowing the client to select the information that is needed.