Why isnt this working? jquery window width

JavaScript
1

I have this:

$(window).ready(function(){
	var wi = $(window).width();
	if (wi <= 767) {
		$(' input:radio').click(function(e){
			$('p').hide();
			var target = $(this).next().next().next('p')
			$(this).is(':checked') ? target.show() : target.hide();
		});	
	}
});

And I want this be used only below screen width of 767px, but nothing happens. The input click function works, so it has something to do with the if statement i guess.

2

Try document.width.

3 
$(this).is(':checked') ? target.show() : target.hide();

This is wrong.
Do this instead:

if ($(this).is(':checked')){
  target.show();
} else {
  target.hide();
}

That help?

4

it works in the sense that if i click a radio-button the paragraph is shown, but if i then click another (making the prev one unchecked), the paragraph from the previous wont hide.

my html looks like this:

<div class="row">
		<div class="outer-wrapper">
			<div class="large-3 columns">
				<div class="wrapper">
					<h4 class="desktop">heading</h4>
					<input type="radio" name="radioname" /><label><img src="../images/img.jpg" /></label><h4 class="mobile">heading</h4>
					<p>
textextext
					</p>
				</div>
			</div>
			<div class="large-3 columns">
				<div class="wrapper">
					<h4 class="desktop">heading</h4>
					<input type="radio" name="radioname" /><label><img src="../images/img.jpg" /></label><h4 class="mobile">heading</h4>
					<p>
textextext
					</p>
				</div>
			</div>
			<div class="large-3 columns">
				<div class="wrapper">
					<h4 class="desktop">heading</h4>
					<input type="radio" name="radioname" /><label><img src="../images/img.jpg" /></label><h4 class="mobile">heading</h4>
					<p>
textextext
					</p>
				</div>
			</div>
			<div class="large-3 columns">
				<div class="wrapper">
					<h4 class="desktop">heading</h4>
					<input type="radio" name="radioname" /><label><img src="../images/img.jpg" /></label><h4 class="mobile">heading</h4>
					<p>
textextext
					</p>
				</div>
			</div>
		</div>
	</div>
5

Hey dude,

Did you read my initial reply?
I edited it after posting initially.

This will work for you:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>  
    <style></style>
  </head>
  <body>
    <div class="row">
      <div class="outer-wrapper">
        <div class="large-3 columns">
          <div class="wrapper">
            <h4 class="desktop">heading</h4>
            <input type="radio" name="radioname" /><label><img src="http://ecx.images-amazon.com/images/I/51H9mCZPB-L._SL500_SS100_.jpg" /></label><h4 class="mobile">heading</h4>
            <p>textextext</p>
          </div>
        </div>
        <div class="large-3 columns">
          <div class="wrapper">
            <h4 class="desktop">heading</h4>
            <input type="radio" name="radioname" /><label><img src="http://ecx.images-amazon.com/images/I/51H9mCZPB-L._SL500_SS100_.jpg" /></label><h4 class="mobile">heading</h4>
            <p>textextext</p>
          </div>
        </div>
        <div class="large-3 columns">
          <div class="wrapper">
            <h4 class="desktop">heading</h4>
            <input type="radio" name="radioname" /><label><img src="http://ecx.images-amazon.com/images/I/51H9mCZPB-L._SL500_SS100_.jpg" /></label><h4 class="mobile">heading</h4>
            <p>textextext</p>
          </div>
        </div>
        <div class="large-3 columns">
          <div class="wrapper">
            <h4 class="desktop">heading</h4>
            <input type="radio" name="radioname" /><label><img src="http://ecx.images-amazon.com/images/I/51H9mCZPB-L._SL500_SS100_.jpg" /></label><h4 class="mobile">heading</h4>
            <p>textextext</p>
          </div>
        </div>
      </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      var w = $(window).width();
      console.log("Width: " + w + "px")
      if (w <= 767) {
        console.log("Window below specified size")
        $(' input:radio').click(function(e){
          $('p').hide();
          var target = $(this).next().next().next('p')
          if ($(this).is(':checked')){
            target.show();
          } else {
            target.hide();
          }
        }); 
      }
    </script>
  </body>
</html>

As mentioned previously, the problem was with:

$(this).is(':checked') ? target.show() : target.hide();

Ternary conditionals can’t be used like that.

6

Now it is working fine! Thanks once again Pullo (Is it Titus Pullo perhaps?=)).

7

It sure is!
I was half way through watching Rome when I registered for the forums.