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="bo开发者_开发知识库x">
    <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.

---

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();
});

---

$(".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
           });

---

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

---

Using jQuery:

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

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

---

$('.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