CODEWITHSUNDEEP
jqueryhtml
Matt Jameson
Matt Jameson

Reputation: 217

Jquery Next() div by ID

At the moment the jQuery below will only jump from Sport to Entertainment. Is there a way of getting from any div to the next by using one piece of code?

<div id="topBar">
    <span>
        <a id='slink' class='trigger' href='#Sports'>Sport</a>
        <a id='elink' class='trigger'  href='#Entertainment'>Entertainment</a >
        <a id='mlink' class='trigger' href='#Military'>Military</a>
        <a id='mocklink' class='trigger' href='#MockUp'>MockUps</a>
        <button>Next</button>
    </span>
</div>

$("button").on('click', function() {
    $('.triggered:First').next('.triggered').show()
});

Upvotes: 0

Views: 773

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Assuming that your .trigger elements are all hidden by default, this should work:

$(".trigger:first").show();

$("button").click(function() {
    var $next = $(".trigger:visible").hide().next(".trigger");
    if (!$next.length)
        $next = $(".trigger:first");

    $next.show();
});

Example fiddle

Upvotes: 1

Zweer
Zweer

Reputation: 124

You could try this:

$("button").click(function() {
    $(this).sibling('.trigger').show();
}

Upvotes: 0

Related Questions