Show Hide rows in asp repeater within Listview - Only hiding first column

Question

I have the following ListView containing a repeater. The repeater loads three lists which act as the columns, each of the three lists contain another list which acts as the rows.

The below works but only hides the Description and the first value column. I need to be able to hide the description and all three value columns

Any help would be greatly appreciated

<asp:ListView ID="ListView1"
        runat="server" DataKeyNames="KeyName1">
        <LayoutTemplate>
            <div runat="server" id="itemPlaceholder"></div>
        </LayoutTemplate>

        <ItemTemplate>
            <div id="div1" runat="server" class="col">
                <h2>
                    <asp:Label runat="Server" Text='<%#Eval("ds1") %>' /></h2>
                <div class="premium">
                    <p>Monthly premium:</p>
                    <p>
                        <asp:Label ID="lbl1" runat="Server" />
                    </p>
                </div>
                <ul id="List1">
                        <asp:Repeater ID="rpt1" runat="server">
                            <ItemTemplate>
                                <li>
                                    <p>
                                        <asp:Label ID="Label1" runat="Server" Text='<%#Eval("Description")%>' />
                                    </p>
                                    <p>
                                        <asp:Label ID="Label2" runat="Server" Text='<%#Eval("Value")%>' />
                                    </p>
                                </li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ul>
                 </div>
                <div class="reveal">
                    <p><a id="show" href="javascript:show();">Show</a><a id="hide" href="javascript:hide();" style="display:none;">hides</a></p>
                </div>
            </div>
        </ItemTemplate>
    </asp:ListView>

I have the following Javascript to show and hide the columns

window.onload = function () {
    hide();
};

function show() {
    var list = document.getElementById('List1').getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        if (i >= 5) {
            list[i].style.display = 'block';
        }
    }
    document.getElementById('hide').style.display = 'inline';
    document.getElementById('show').style.display = 'none';
}

function hide() {
    var list = document.getElementById('List1').getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        if (i >= 5) {
            list[i].style.display = 'none';
        }
    }

Answer 1

Thanks to wizpert's advise I got it working with the below code :-)

function hide() {
    var cnt = 0;
    $("ul li").each(function () {
        if ((cnt > 9 && cnt < 16) || (cnt > 20 && cnt < 27) || (cnt > 31 && cnt < 38)) {
            $(this).hide();
        }
        cnt++;
    });
}

I'm sure there are better solutions out there as if more data is loaded into the repeater or more ul li tags are added to the page the script will break :-)