CODEWITHSUNDEEP
javascriptjqueryhtml
StuBlackett
StuBlackett

Reputation: 3857

Nested ul show on anchor click

I have a site structured like so :

When I click the "add-info" the ul does not show, Not quite sure what to do with it to get it to show?

<ul>
    <li>Liebherr LHM 600 Mobile Harbour Crane. <a class="add-info" href="#">Find out more</a>
        <ul class="hidden-list">
            <li>Liebherr LHM 600 Mobile Harbour Crane. SWL of 208 Ton and capable of lifting 53.7 ton at 58 meters radius. Can be used for bulk container loading/unloading with our Bromma container handler attachment. Maximum hoisting height above quay of 59 metres.</li>
        </ul>
    </li>
    <li>Liebherr LR1300 Crawler Crane. <a class="add-info" href="#">Find out more</a>
        <ul class="hidden-list">
            <li>Coming December 2014 Liebherr LR1300 Crawler Crane. Can be configured to lift 300.5 ton and can be configured to a maximum radius of 80 metres. Can be fitted with a leader rig attachment and Bruce 16 ton piling hammer for piling.</li>
        </ul>
    </li>
    <li>Sennebogen 6130 Crawler Crane. <a class="add-info" href="#">Find out more</a>
        <ul class="hidden-list">
            <li>Sennebogen 6130 Crawler Crane. Can be configured to lift 136 ton and has a maximum radius of 42 metres.</li>
        </ul>
    </li>
    <li>Zoomlion RT55 Rough Terrain Crane. <a class="add-info" href="#">Find out more</a>
        <ul class="hidden-list">
            <li>RT55 Rough Terrain Crane. SWL of 54.88 ton and a maximum working radius radius of 41 metres. A main jib head height of 34 metres but also comes complete with a telescopic fly jib that can increase the head height up to a height of 54 metres and can be offset from 0 to 40 degrees.</li>
        </ul>
    </li>
    <li>Scheuerle 6 axel SPMT modular trailers complete with Z350 power pack units. <a class="add-info" href="#">Find out more</a>
        <ul class="hidden-list">
            <li>Scheuerle 6 axel SPMT modular trailers complete with Z350 power pack units. With a SWL of 48 ton per axel can be supplied in a vast array of different configurations.</li>
        </ul>
    </li>
    <li>Forklifts <a class="add-info" href="#">Find out more</a>
        <ul class="hidden-list">
            <li>Various sizes of forklifts available from 2.5 ton up to 32 ton.</li>
        </ul>
    </li>
</ul>

What I'd like to do is on the "add-info" click in jQuery, Show the ul.hidden-list, SlideDown or whatever effect, As long as it shows.

I have created a jsFiddle

My current jQuery code :

$('.add-info').click(function() {

    $(this).children('ul.hidden-list').slideToggle();

    return false;
});

Upvotes: 2

Views: 62

Answers (1)

VisioN
VisioN

Reputation: 145398

According to your markup <ul> element is placed as a next element to <a> and not as a direct descendant, so .next() (or .siblings) method should be used:

$('.add-info').click(function() {
    $(this).next('ul.hidden-list').slideToggle();

    return false;
});

DEMO: http://jsfiddle.net/vog8bsLc/1/

Upvotes: 2

Related Questions