Why the toggle is not working with other DIVs?

Question

Here i have a fiddle link ! The problem is only 1st top div is working..

[http://jsfiddle.net/5Ux8L/4/][1]

HTML-

 <div id="top">top </div>
    <div id="box">box </div>
 <div id="top">top </div>
    <div id="box">box </div>

jQuery-

$(document).ready(function(){
  $("#top").click(function (){
        $("#box").toggle();
    });
});

Answer 1

Use common class instead of ids, you should not have duplicate ids .

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next().toggle();
    });
});

Answer 2

You cannot have elements with the same id. Change top from an id to a class .

HTML

 <div class="top">top </div>
 <div class="box">box </div>
 <div class="top">top </div>
 <div class="box">box </div>

Javascript

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next(".box").toggle();
    });
});

JS Fiddle: http://jsfiddle.net/5T3K2/

Answer 3

Id of an element must be unique, so use class instead

<div class="top">top</div>
<div class="box">box</div>
<div class="top">top</div>
<div class="box">box</div>

then

jQuery(function ($) {
    $(".top").click(function () {
        $(this).next().toggle();
    });
});

Demo: Fiddle

Answer 4

$(document).ready(function(){
$(".top").click(function (){
    $(this).next(".box").toggle();
});
});

http://jsfiddle.net/5Ux8L/5/

Answer 5

Don't use id name for multipal divs. Always use class. By the way here is your working code.

 <div class="top">top </div>
    <div class="box">box </div>
 <div class="top">top </div>
    <div class="box">box </div>

jQuery

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next().toggle();
    });
});

Demo

Answer 6

Use class instead of Id . Id is unique property. fiddle

 <div class="top">top </div>
    <div class="box">box </div>
 <div class="top">top </div>
    <div class="box">box </div>

$(document).ready(function(){
  $(".top").click(function (){
        $(".box").toggle();
    });
});