Question

I have this page and when i click the header like “Computers” or any of the others the items below need to slide up and down

I have this structure

    <div class="title-box box-active">
    <div class="line">
        <div class="text left">
            <p>(1) Software</p>
        </div>
        <div class="price right">
            <p>500.00</p>
        </div>
        <div class="cl">&nbsp;</div>
    </div>
</div>
<div class="item">
    <div class="item-t"></div>
    <div class="item-c">
        <div class="line last">
            <input type="text" class="field left" value="1" />
            <div class="text left">
                <p>Aldelo</p>
            </div>
            <div class="price left">
                <p>450.00</p>
            </div>
            <a href="#" class="close right"></a>
            <div class="cl">&nbsp;</div>
        </div>
    </div>
    <div class="item-b"></div>
</div>

but this is not working and I cant figure out why

$('.title-box').click(function() {
 $(this).parent().next('.line').slideToggle();
return false;
});

Answer 1

If you’re trying to get the .line element to slide, it is a child of .title-box, so try this:

$('.title-box').click(function() {
    $(this).children('.line').slideToggle();
    return false;
});

In the callback, this refers to the .title-box. So since .line is a direct child of .title-box, you need to use .children('.line') to get it.