Jquery / Wordpress "Show more" button static columns
<p>I have some content on a wordpress page, the content is static and I have made a grid of 2 columns and 6 rows which is currently showing on the page. I am trying to add a show more button that when clicked will show the next 2 columns in the list, then once its clicked again it will show the next 2 columns etc until there are no more columns.</p>

<p>My current problem is when the page loads it hides all the columns and then start showing one part of the column (e.g firs the flip image, then on second button click the text). I need it show all the data in each column as opposed to one part at a time.</p>

<h1>update</h1>

<p><a href="https://jsfiddle.net/oLp0x08o/15/" rel="nofollow">https://jsfiddle.net/kenyboy9/4terL5a4/</a> </p>

<p>I am currently using a number of shortcodes to create the columns and display data.</p>

<p><strong>Ignore the $j selector as its part of the theme</strong></p>

<h1>Jquery</h1>

<pre><code>var itemsCount = 0,
itemsMax = $j('.leaders div').length;
$j('.leaders div').hide();

function showNextItems() {
var pagination = 4;

for (var i = itemsCount; i &lt; (itemsCount + pagination); i++) {
    $j('.leaders div:eq(' + i + ')').show();
}

itemsCount += pagination;

if (itemsCount &gt; itemsMax) {
    $j('#showMore').hide();
}
};

showNextItems();

$j('#showMore').on('click', function (e) {
e.preventDefault();
showNextItems();
});
</code></pre>

<h1>HTML / WORDPRESS (i have only included 2 columns the rest are duplicates)</h1>

<pre><code> &lt;div class="leaders"&gt;
 &lt;div class="two_columns_50_50 clearfix"&gt;
 &lt;div class="column1"&gt;&lt;div class="column_inner"&gt;
 &lt;div class="two_columns_33_66 clearfix"&gt;
 &lt;div class="column1"&gt;
 &lt;div class="column_inner"&gt;
 &lt;div class="flip_image_holder flip no" data-delay="500"&gt;&lt;a href="" target=""&gt;
 &lt;div class="flip_image front"&gt;
 &lt;img src="#" alt=""&gt;
 &lt;/div&gt;
 &lt;div class="flip_image back" style="background-color: ;"&gt;
 &lt;div class="flip_image_text"&gt;
 &lt;div class="flip_image_text_inner"&gt;
 &lt;h4&gt;William Akerman&lt;/h4&gt;
 &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;
 &lt;div class="column2"&gt;&lt;div class="column_inner"&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;span style="color: #e7332a; font-size: 18pt;"&gt;Ben Pietch&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;&lt;span style="font-size: 14pt;"&gt;Bike Mechanic&lt;/span&gt;&lt;br&gt;
 &lt;span style="font-size: 14pt;"&gt;CEO Bike Mechanic Inc&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;&lt;span style="font-size: 14pt;"&gt;Lorem ipsum dolor sit amet, consectetur &lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;div class="column2"&gt;&lt;div class="column_inner"&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;&lt;div class="two_columns_33_66 clearfix"&gt;&lt;div class="column1"&gt;&lt;div class="column_inner"&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;&lt;div class="flip_image_holder flip no" data-delay="500"&gt;&lt;a href="" target=""&gt;&lt;div class="flip_image front"&gt;&lt;img src="#" alt=""&gt;&lt;/div&gt;&lt;div class="flip_image back" style="background-color: ;"&gt;&lt;div class="flip_image_text"&gt;&lt;div class="flip_image_text_inner"&gt;&lt;h4&gt;james Norton&lt;/h4&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;
 &lt;div class="column2"&gt;&lt;div class="column_inner"&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;span style="color: #e7332a; font-size: 18pt;"&gt;Mechanic&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;&lt;span style="font-size: 14pt;"&gt;Director&lt;/span&gt;&lt;br&gt;
 &lt;span style="font-size: 14pt;"&gt;CEO Norton Direct&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;&lt;span style="font-size: 14pt;"&gt;Lorem ipsum dolor sit amet, consectetur &lt;/span&gt;&lt;br&gt;
 &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
 &lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;a id="showMore" href="#"&gt;Show More&lt;/a&gt;
</code></pre>