jQuery .css does not add display:block; for all divs

Question

Hi jQuery script does not add display block for all same mane divs, only for the first one.

JS

$("#sidecontrol_container").mouseenter(function(){
    setTimeout( function(){
    $('#packet_name').css('display','block');
       },310);
$( "#sidecontrol_container" ).animate({
        width:"230px"
    }, 300 );       
});
$("#sidecontrol_container").mouseleave(function(){
    $('#packet_name').css('display','none');
    $( "#sidecontrol_container" ).animate({
        width:"40px"
    }, 300 );   
});

HTML

<div id="sc_wraper">
    <div id="packet_name">1</div>
</div>

<div id="sc_wraper">
    <div id="packet_name">1</div>
</div>

CSS

#packet_name{
    height:40px;
    width:190px;
    float:right;
    display:none;
}

It only adds for first div with name packet_name <div id="packet_name" style="display:block;">1</div>

HTML RESULT after mouseenter

<div id="sc_wraper">
        <div id="packet_name" style="display:block;">1</div>
    </div>

    <div id="sc_wraper">
        <div id="packet_name">1</div>
    </div>

You need to use div classes instead, IDs are only for single occurrences on a page. Then adjust your jQuery as appropriate — robobobobo
– robobobobo, Commented Apr 20, 2014 at 1:17
@robobobobo why don't you add that as an answer? Your suggestion seemed to have worked for Vadimas. — Sumner Evans
– Sumner Evans, Commented Apr 20, 2014 at 1:27

robobobobo · Accepted Answer · 2014-04-20 01:32:12Z

2

The reason it is only changing the first one is because jQuery only selects the first instance of the div name since its an ID.

If you want to change multiple divs of the same name you need to use div classes instead for their names. Once you update your html to use class names, do the same with jQuery and it should work

answered Apr 20, 2014 at 1:32

robobobobo

7591 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2847749 Over a year ago

OMG. such a silly mistake but I wouldn't have thought of it (I'm relatively new to these languages.) Thank you!!

Collectives™ on Stack Overflow

jQuery .css does not add display:block; for all divs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related