How to display all AJAX news on button click?

Question

JavaScript

Hi all!

through bootstrap tabs displayed news on the main page
Tab - Category 1

{custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="15"}

Tab - Category 2

{custom category="4" template="shortstory" order="title" sort="desc" limit="15"}

Tab - Category 3

{custom category="5" template="shortstory" order="title" sort="desc" limit="15"}

how to make it so that 15 news are displayed,
and then show 15 more news, when you press the button, 15 more news are displayed.
And if all the news are displayed, then the buttons are not visible!

Answer 1

You need to edit cms, php, sql queries, but if it's simple, then install the module: BlockPRO

Answer 2

Under each "custom" add another "custom", without the limit parameter, but with the from parameter. We put each new tag in a hidden div-container, next to the button for display.
Example for first tab, need jquery

{custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="15"}
<br />
<button onclick="$(this).next('div').show()">Показать все</button>
<div style="display:none">
{custom category="1,2,3" template="shortstory" order="title" sort="desc" from="15"}
</div>

did like this, well, at the same time, it is necessary that the button disappear if all the news are displayed, and there is nothing more to show!