CODEWITHSUNDEEP
jqueryloops
Alex
Alex

Reputation: 830

jQuery iterate some div

I have html:

<div class="box">
    <input name="radio-1" value="1" type="radio" class="radio">
    <div class="hidden_box">
    some content
    </div>
</div>

<div class="box">
    <input name="radio-2" value="1" type="radio" class="radio">
    <div class="hidden_box">
    some content
    </div>
</div>

.... and so on

When I click on radio button I need to make "hidden_box" visible in this "box" div. How can I do it?

Please, help.

Upvotes: 0

Views: 141

Answers (5)

ampersand
ampersand

Reputation: 4314

Since you tagged your Q with jQuery, I'll use that:

$('.radio').click(function(){
    $(this).parent().find('.hidden_box').show();
});

See working example.

UPDATE: If you want to apply this to all present and future '.box' items, use:

$('.radio').live('click', function(){
        $(this).parent().find('.hidden_box').show();
});

Upvotes: 2

CambridgeMike
CambridgeMike

Reputation: 4622

$('.radio').click(function(){
     $('.hidden_box', $(this).parent()).show();
})

Will work, even if hidden_box isn't the next DOM element. The second parameter in a jquery selector is the scope.

UPDATE: Using find(), as demonstrated elsewhere in the answers looks a bit cleaner to me

Upvotes: 0

Jamiec
Jamiec

Reputation: 136239

Using jQuery:

$('.box input').click(function(){
   $(this).next('.hidden_box').toggle();
});

Live example: http://jsfiddle.net/ZmRdg/

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227310

$('.radio').click(function(i,v){
  $(this).next('.hidden_box').toggle();
});

Upvotes: 0

Dennis
Dennis

Reputation: 32608

$(".radio") //select the radio buttons
           .click( function() { //Assign a click handler
               $(this).next().show(); //Get the element that comes after this one and make it visible
           });

Upvotes: 0

Related Questions