Tip: Display Articles in Multiple Pages

This tip was originally posted [here](/hc/communities/public/posts/203775287), but based on request, this is being posted here as well. You can use following code-snippets to show articles on multiple pages. #### Step 1: Copy and paste below js ``` 'use strict'; (function(_w, _d, $) { $(_d).ready(function() { if(typeof $('.pagged-view').get(0) != 'undefined') { var _wrapper = $('.pagged-view'); var _pages = _wrapper.find('.page'); var _actpage = _wrapper.find('.page.active'); var _links = ''; // Hide all page elements _pages.hide(); // Show selected page _actpage.show(); // Create pagination links _pages.each(function(idx, item) { _links += '

'+(idx + 1)+'

'; }); // Add pagination _wrapper.after('

'); // Click Settings for page numbers $('.pagination .page-num').on('click', function(e) { e.preventDefault(); var _viewPageNum = $(this).find('a').attr('href').replace('#p',''); _pages.removeClass('active').hide(); $(_pages.get(_viewPageNum)).addClass('active').show(); }); // Button Previous Click Settings $('.pagination .prev').on('click', function(e) { e.preventDefault(); var _current = _wrapper.find('.page.active'); var _prev = _current.prev('.page'); if(typeof _prev.get(0) != 'undefined') { _pages.removeClass('active').hide(); _prev.addClass('active').show(); } }); // Button Next Click Settings $('.pagination .next').on('click', function(e) { e.preventDefault(); var _current = _wrapper.find('.page.active'); var _next = _current.next('.page'); if(typeof _next.get(0) != 'undefined') { _pages.removeClass('active').hide(); _next.addClass('active').show(); } }); } }); } (window, document, jQuery) ); ``` #### Step 2: Now in order to convert your article into multiple pages add the following classes into your article source code: ```

Here "page-active" is for the page you wanna show first. eg
- Lesson 1: From support requests to tickets
  
  Regardless of the type of customer support you provide, the one constant for all support organizations is that customers seek you out to help them resolve their issues. Here are some of the options that your customers have for contacting you:
  - Send an email
  - Fill out a support request form in your Zendesk support portal
  - Fill out a support request form on your own web site
  - Call you on the telephone
  - Text chat with you
  - Send you a tweet
  - Post on your Facebook wall
  All of these communication options are referred to as channels in Zendesk. You decide what channels you want to enable in your Zendesk and how your customers can reach you.
- Try it yourself: Create a ticket now
  
  If you've already set up your trial account, you can create a test ticket right now and start testing out your Zendesk and see what a typical ticket looks like.
- Anatomy of a ticket
  
  With your new ticket open in front of you, you can see that the support request you submitted earlier is the first comment on this ticket. Above that you see that a new empty comment is open and ready for you (as the agent) to enter a response.
``` Hope that helps you. Please let me know if there is any issue with above code, or you think there is a better way to do this; we are sure there are many ways. Cheers [Diziana](http://www.diziana.com)

Jennifer Rowe

2015年05月12日 17:37

Zendesk Documentation Team

Thanks for posting this great tip, Diziana!

Renato Lyke

2015年05月13日 09:27
編集済み

Thanks for the tip Diziana. Is it possible to add Next and Prev Buttons to the top hand side of the article. Like the one in the image.

Diziana

2015年05月14日 10:04
編集済み

Hi Renato,

It can be done by adding the following HTML snippet, just before the "pagged-view" wrapper.

<ul class="pagination">
  <li class="prev"><a href="#">Prev</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

So, new HTML for your article source code will be:

 `<ul class="pagination">
  <li class="prev"><a href="#">Prev</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

<ul class="`  `pagged-view">
  <li `  `class="page">
    .....
    .....
  </li>
  ....
  ....
</ul>`

In order to put the pre/next button towards left you need to update the css or you can do it by adding

To the article HTML.

Hope that will work for you.

Let me know if you face any problem.

Cheers,

http://www.diziana.com/

2015年05月14日 10:32

Thanks Diziana. Will this work for the next article if i have it the same way it is in getting started section. Or do i need to add the links to each when i go to the page source.

2015年05月14日 11:46

You have to do it for every single article you add in order to show the pagination.

However If you wanna show next/previous throughout your article then you have to add the following code into your article templete.

Adding into your article templete will do the trick for all the article pages you have.

Let me know if you face an issue.

Thanks

Michael Ogilvie

2016年10月12日 19:13

Anyway to display the page information in the article title? and to disable the Prev or Next button if there is no page in that direction?

Tip: Display Articles in Multiple Pages

Lesson 1: From support requests to tickets

Try it yourself: Create a ticket now

Anatomy of a ticket

6 コメント

お探しのものを見つけられませんでしたか？