Question

I have following html

<div class="foo">
    <a href="" class="bar1">Bar1</a>
    <a href="" class="bar2">Bar2</a>
</div>

let’s say .foo is hide in default, then I just want to show .foo and his child .bar1. How to do this in jquery?

I have this in my jquery

$('#' + id).children(".foo //anything I can do here to select ONLY bar1 to show? ").show();

Answer 1

I would hide all children and just show bar1. See below,

var $foo = $('.foo');    //cache foo
$foo.children().hide();  //hide all foo's children
$foo.show();             //show foo
$foo.find('.bar1').show();  //show bar1