Get started with Explore and compare to Insights

Return to top

4 Comments

  • Richard Hilgart

    Probably not the right place to ask this question, but I ve tried to find an answer everyhwere. Is there a template for Zendesk Guide to add "foldable tiles" like in this article? Or does this require coding on our end?

    Any help would be highly appreciated?

    0
  • Rob Stack
    Zendesk Documentation Team

    Hi Richard Hilgart, thanks for the question.

    We don't currently have a template for this, but it's definitely something I'll add to the list (though that might take a little while to get to!).
    In the meantime, everything is defined in the HTML of the article to see how it works. A couple of clues:

    You need the:
     <div id="bootstrap-overrides">
          <div id="accordion">
    near the beginning of the article and then each expand/collapse column is contained in a

    <div class="card">
    element (each with a different ID).

    Hopefully, that gives you a start. Here's an example HTML source for a very simple article with two expand/collapse sections.

    <div class="body"></div>
    <div id="topic_uny_ffc_pt" class="topic nested1">
    <p>This is your introductory text.</p>
    <div class="body">
    <div id="bootstrap-overrides">
    <div id="accordion">
    <div class="card">
    <div id="hd_up" class="card-header">
    <button class="btn btn-link" data-target="#intro_up" data-toggle="collapse">&gt; This is section 1&nbsp;</button>
    </div>
    <div id="intro_up" class="collapse hide" data-parent="#accordion">
    <h2 id="h_7c1da0ef-91f0-453d-9225-3029955dfdde" class="card-body">
    <a name="intro_up"></a>Section 1
    </h2>
    <div class="card-body">
    <div class="body">
    <div class="body">
    <div id="topic_fvf_xlr_43b" class="topic nested2" aria-labelledby="ariaid-title3">This is the text that will be expanded for section 1.</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <p>This is some other text that will always be visible.</p>
    <div class="card">
    <div id="hd_vd" class="card-header">
    <button class="btn btn-link" data-target="#intro_vd" data-toggle="collapse">&gt; This is section 2</button>
    </div>
    <div id="intro_vd" class="collapse hide" data-parent="#accordion">
    <h2 id="h_d9072e3c-e70b-4dea-8b33-cd2577760e6g" class="card-body">
    <a name="intro_vd"></a>Section 2
    </h2>
    <div class="card-body">
    <div id="topic_gvh_fmr_43b" class="topic nested2" aria-labelledby="ariaid-title7">
    <div id="topic_gvh_fmr_43b" class="topic nested2" aria-labelledby="ariaid-title7">
    <div id="topic_hhc_t4r_43b" class="topic nested2" aria-labelledby="ariaid-title15">
    <div id="topic_hhc_t4r_43b" class="topic nested2" aria-labelledby="ariaid-title15">
    <p class="p">This is the text that will be expanded for section 2.</p>
    <p class="p">&nbsp;</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div id="topic_wl5_zdb_rt" class="topic nested1">
    <div class="body">
    <h2 class="p">This section will always be visible</h2>
    Section text goes here.
    </div>
    </div>
    </div>
    </div>

     

    (that HTML might have formatted a little 'wonky', so you might have to do a little extra formatting!)

    0
  • Nicole Saunders
    Zendesk Community Manager

    Thanks for sharing that, Rob!

    I'll add that there's a user tip in the community here: help Center Collapsible headers in articles

    And for future reference, the Guide Q&A topic is the best place to ask about ways to customize your Help Center theme.

    0
  • Richard Hilgart

    Thanks a lot for the quick feedback! Hope we can create this for us.

     

    0

Please sign in to leave a comment.

Powered by Zendesk