Hide elements and 'View more' using jQuery

Question

Hi all,

JavaScript is not my strong point, but then I'm not sure I'm hitting this from the right direction.

Firstly, I have some XSLT which produces HTML tables with event information in them. I assign a numerical ID to each table which matches the XSL position().

What I want to achieve is to show only the first 10 tables, until the use clicks a 'View More' link then the next 10 tables are shown until the end of the elements.

I'm having a problem from the outset in that the code that I have written is not hiding the tables over 10 and now the page is crashing in what I assume is an endless loop:

Here is the XSLT:

<xsl:for-each select="umbraco.library:GetMedia(1116, 'true')/node">
    <xsl:variable name="fileName" select="data [@alias = 'file']" />
    <xsl:variable name="tableID" select="position()" />

    <table id="{$tableID}">
    <tr>
        <td class="eventDate">
            <xsl:value-of select="data [@alias = 'eventDate']"/></td>
        <td><a href="/downloader?file={$fileName}" target="_blank()" class="eventTitle"><xsl:value-of select="data [@alias = 'title']"/></a></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td class="newsSubTitle"><xsl:value-of select="data [@alias = 'subTitle']"/></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/borders/news_separator.gif" />
        </td>
    </tr>
    </table>
</xsl:for-each>

Here is the JavaScript:

<script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var rc = $('#eventReportsList table').length;

            if(rc > 10) {
                var i=0;
                for (i=11;i=rc;i++) {
                    var currElement = '#' + i;
                    $(currElement).hide();
                }   
            };
            alert('Count ' + rc);
        });
    </script>

Some assistance or pointers in the right direction would be great!

Thanks.

Answer 1

I've not looked at it too much, but your jQuery seems a bit OTT. Something like:

$('table').filter(function(index) {
    return index > 10;
}).hide();

will hide the 11th table onwards on your page. If you're using tables elsewhere, just give them all a class like hideable and do

$('.hideable').filter(function(index) {
    return index > 10;
}).hide(); 

Answer 2

To hide tables from 11-th on:

$('table:gt(9)').hide();

:gt(x) selects siblings with indices (0-based) greater than x;

To show hidden tables again:

$('table:hidden').show();

Answer 3

Changed XSL:

<xsl:variable name="tablesPerSet" select="10" />

<xsl:for-each select="umbraco.library:GetMedia(1116, 'true')/node">
  <xsl:variable name="posZ" select="position() - 1" />
  <xsl:variable name="tableSetId" select="
    ($posZ - ($posZ mod $tablesPerSet)) div $tablesPerSet
  " />
  <table class="hideable tableSet_{$tableSetId}">
    <!-- ... -->
  </table>    
</xsl:for-each>

Results in:

<table class="hideable tableSet_0"></table><!-- #1 -->
<!-- ... -->
<table class="hideable tableSet_0><!-- #10 -->
<table class="hideable tableSet_1"></table><!-- #11 -->
<!-- and so on -->

So you can do with jQuery

// first hide all, then show only those that match i
$("table.hideable").hide().is(".tableSet_" + i).show();

I trust you'll manage incrementing/decrementing i while keeping it in a valid range yourself. ;)