How would i target the sibling <p>?

JavaScript
1

I have this script:

$('input:radio').click(
function(e){
    if ($(this).is(':checked')){
        $('p').show();
    }
});

But atm all <p> elements are shown when the radio is checked. How would I modify this so only the <p> element that comes right after the radio-button is shown?

I tried something like this (beware jquery noob):

$('input:radio').click(
function(e){
    if ($(this).is(':checked')){
        $(this).next('p').show();
    }
});

but that didn’t work.

2

If the <p> is immediately following the radio input, all you should need is .next().show().

http://api.jquery.com/next/

3

I forgot I have a <label> before the <p> tag also, so I guess the .next().show() doesnt work then?

4

Hmm… well… yeah, the label might crimp it, a bit. What you had ($(this).next(‘p’).show() should do it… are you seeing any error messages in the console?

5

Hmm no error-messages, it just aint working.

6

I’m trying it locally… same result… nothing.

7

Hmm okey.

Anyone else know?

8

If its the second element then you could do this:


$('input:radio').click(
function(e){
    if ($(this).is(':checked')){
       [B] $(this).next().next('p').show();[/B]
							}
});

Of course that does rely on a certain structure all the time.

9

Thanks this works (Y)

How would I modify this if I want the <p> to be hidden if the radio is not checked? Of couse I have the <p> as display: none in the CSS, but if i click another radio-button, which makes the current one unchecked, how do I then hide the <p>?

I tried this but it is not doing what i want it to:

$('input:radio').click(
function(e){
    if ($(this).is(':checked', true)){
        $(this).next().next('p').show();
    } else if ($(this).is(':checked', false)) {
    	$(this).next().next('p').hide();
    }
});
10

Do you mean something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
form p { display:none;margin:0 }
</style>
</head>

<body>
<form>
		<div>
				<input type="radio" name="radio" id="test" value="test">
				<label for="test">Label 1</label>
				<p>Show me</p>
		</div>
		<div>
				<input type="radio" name="radio" id="test2" value="test2">
				<label for="test2">Label 2</label>
				<p>Or show me</p>
		</div>
</form>
<script>
$('input:radio').click(
	function(e){
		$('form p').hide();
		var target = $(this).next().next('p')
 	$(this).is(':checked') ? target.show() : target.hide();
});

</script>
</body>
</html>
11

Perfect! Thanks=)