Question

im using :gt() to hide list elements and i got a link that unhides them on a click. now i want it to be toggle based but that really does not work for me. any ideas?

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li id="not-this"><a href="#" class="click-me">show me</a></li>
</ul>


$(document).ready(function () {
        $('ul#list li:gt(5)').not('#not-this').hide();
        $('.click-me').click(function () {
            $('ul#list li:gt(5)').toggle('slow');
        });
    });

EDIT:
It does open it it just wont close it.

EDIT
i added the change link text and my solution looks like this now

$('ul#list li:gt(5)').not('#not-this').hide();
        $('.click-me').click(function () {
            $('ul#list li:gt(5)').not('#not-this').toggle();
            $(this).text(($('.click-me').text() == 'show me') ? 'hide me' : 'show me');
        });

Answer 1

just try dis.coding

$(document).ready(function () {
            $('ul#list li:gt(5)').not('#not-this').hide();
            $('.click-me').click(function () {
                $('ul#list li:gt(5)').not('#not-this').toggle('slow');
            });
        });