How to do show/hide of table rows multiple times per page?

Question

I'm fairly new to programming and JS so I would like some pointers in terms of how I would go about this. I want to use that code for multiple instance of toggle per page.

I want by default table only shows 3 rows and when some click on view more it shows the rest of the rows and it should be toggle on click

$(document).ready(function(){
    // toggle rows
    $( ".viewSection a" ).click(function() {
        var $self = $(this);
        var $nextUl = $self.parent().next();
        $(this).parent().next().slideToggle("fast");
    });
})

HTML:

<div class="block">
    <div class="tabWrapper">
        <div class="tabContainer">
            <div class="tabContent" style="display: none;">
                <div class="childTable">
                    <table class="tableSeconday">
                        <thead>
                            <tr>
                                <th colspan="2">TOTAL BACKLOG: 20</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Lotus Greens Enviro City</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Lotus Greens Enviro City</td>
                                <td>15</td>
                            </tr>
                        </tbody>
                    </table>
                    <!--/tableSeconday-->
                </div>
                <!--/childTable-->
            </div>
            <!--/tabContent-->
            <div class="tabContent" style="display: block;">
                <div class="childTable">
                    <table class="tableSeconday">
                        <thead>
                            <tr>
                                <th colspan="2">TOTAL BACKLOG: 30</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                            <tr>
                                <td>Gaursons Yamuna City Plots</td>
                                <td>15</td>
                            </tr>
                        </tbody>
                    </table>
                    <!--/tableSeconday-->
                </div>
                <!--/childTable-->
            </div>
            <!--/tabContent-->
        </div>
    </div>
    <div class="viewSection">   <a href="#">view more</a>

    </div>
</div>

JSfiddle: http://jsfiddle.net/s9L128g9/

I don't want to have to work with manually adding separate IDs to the JS to activate the toggle. All I want to do is have multiple toggle areas on the same page, and use a class in the JS to work them all.

Answer 1

Try this :

// get all tr from second table with class="tableSeconday:eq"
var rows = $(".tableSeconday:eq(1) tr");
// slice after 4th row as first row include header part and hide them all
$(rows).slice(4,rows.length).each(function(index, element) {
       $(this).hide();
});
// toggle rows
    $( ".viewSection a" ).click(function() {
    // show all tr from table
    $(".tableSeconday:eq(1) tr").show();
});

Demo

EDIT - to work same for multiple table with class="tableSeconday" and toggle show / hide rows, use below query :

var showingLess = false;

var showLess = function(){
  $(".tableSeconday").each(function(){
    var rows = $(this).find("tr");
    $(rows).slice(4,rows.length).each(function(index, element) {
       $(this).hide();
    });
  });

  showingLess = true;
}

// call showLess() for first time
showLess();

// toggle rows
$( ".viewSection a" ).click(function() {
    if(showingLess)
    {
      $(".tableSeconday tr").show();
        showingLess = false;
    }
    else
    {
       showLess(); 
    }
});

Demo

Answer 2

I think DOM Traversal is the way forwards. It's the only way to work on children of an element selected by class, where the element may be present multiple times on a page (AFAIK).

Small HTML change to put the 'show more/less' link in to the parent table div... JS is:

$('.tableSeconday').each(function () {
    $(this).find('tr:gt(3)').hide();
});

$(".viewSection a").click(function () {
    var $table = $(this).parent().prevAll('div').find('table');
    $table.find('tr:gt(3)').toggle();
    $(this).html($(this).html() == 'view more' ? 'view less' : 'view more');
});

http://jsfiddle.net/daveSalomon/rnwr07ar/6/

Answer 3

Building on the previous answer (nice work btw) this Demo version will toggle the rows visibility as well as change the text to "view more/less".

// toggle rows
$( ".viewSection a" ).click(function() {
        $(rows).slice(4,rows.length).each(function(index, element) {
            if ($(this).is(":visible")) {
               $(this).hide();
               $("#showRows").html("view more");
            } else {
                $(this).show();
                $("#showRows").html("view less");
            }
        });
});

Bhushan did the heavy lifting here but i don't have enough rep to add this as a comment sorry