Question

I have a modal popup which has different divs for different messages, now i want to hide each div and show just the one I need to show. instead of writing out each div id and setting it to hidden i wanted to do a loop so i put my divs inside an UL list. But I can’t seem to figure out how to hide just the divs inside that UL list..

$("#panels li").each(function (i) {
        $('div').toggle();
    });

<ul id="panels">
        <li><div id="dvError" class="hiddencol">this is div 1</div></li>
        <li><div id="dvconfirm" class="hiddencol">this is div 2</div></li>
</ul>

for some reason when I do this it hides them but it hides every div on my page 🙁

Answer 1

You can just do

$("#panels").find('div').toggle();

or

$("#panels div").toggle();

or if you want to keep your loop

$("#panels li").each(function (i) {
    $(this).find('div').toggle();
});

$('div').toggle(); <– this will toggle every div on your page