jQuery show/hide form fields

Question

I have this simple form pictured below. Depending on the format selected the appropriate input field will show when clicked.

This is what I have so far. I have this form in 2 different locations on the page so that's way it's written the way that it is. The first function works but not the second. When PDF is clicked it shows the file upload. When link is clicked it hides the file upload but doesn't show the text field.

HTML

Any help is appreciated or link to similar question that would be helpful. Thanks

*UPDATE: Something I did notice. Whichever div is first, linkURL or uploadPDF, that is the one that will show. Example if linkURL is first that input will show when clicked but not the file upload for PDF.

//Format check
$(".pdf").click(function() {
  if ($(this).prop("checked")) {
    $(this).parent().next(".uploadPDF").css("display", "inline-block");
    $(".linkURL").css("display", "none");
  }
});

$(".link").click(function() {
  if ($(this).prop("checked")) {
    $(this).parent().next(".linkURL").css("display", "inline-block");
    $(".uploadPDF").css("display", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form>
  <div class="form_left">
    <label for="document"><strong>Name:</strong> <span style="color: red;">*</span></label><br />
    <input id="document" name="document" type="text" />
  </div>
  <div class="form_right">
    <label for="type"><strong>Format:</strong> <span style="color: red;">*</span></label> <br />
    <input type="radio" name="radio_Type" class="pdf" value="PDF" /> PDF
    <input type="radio" name="radio_Type" class="link" value="Link" /> Link
  </div>
  <div id="" class="form_left uploadPDF" style="display:none">
    <label for="pdf"><strong>Attach PDF:</strong> <span style="color: red;">*</span></label><br/>
    <input type="file" name="fileToUploadPDF" id="fileToUploadPDF">
  </div>
  <div id="" class="form_left linkURL" style="display: none;">
    <label for="url"><strong>Link URL:</strong> <span style="color: red;">*</span></label><br/>
    <input id="url" type="text" name="url" value="" />
  </div>
  <div>
    <input class="submitBtn" id="submit" name="submit" type="submit" value="Add">
  </div>
</form>

Answer 1

Simplified your code with .siblings()

Working snippet:-

//Format check
$(".pdf").click(function() {
  if($(this).prop("checked")) {
    $(this).parent().siblings(".uploadPDF").css("display","inline-block");
    $(this).parent().siblings(".linkURL").css("display","none");
  }
});

$(".link").click(function() {
  if($(this).prop("checked")) {
    $(this).parent().siblings(".linkURL").css("display","inline-block");
    $(this).parent().siblings(".uploadPDF").css("display","none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form_left">
      <label for="document"><strong>Name:</strong> <span style="color: red;">*</span></label><br />
      <input id="document" name="document" type="text" />
  </div>
  <div class="form_right">
      <label for="type"><strong>Format:</strong> <span style="color: red;">*</span></label> <br /> 
      <input type="radio" name="radio_Type" class="pdf" value="PDF" /> PDF
      <input type="radio" name="radio_Type" class="link" value="Link" /> Link
  </div>
  <div id="" class="form_left uploadPDF" style="display:none">
    <label for="pdf"><strong>Attach PDF:</strong> <span style="color: red;">*</span></label><br/>
    <input type="file" name="fileToUploadPDF" id="fileToUploadPDF"> 
  </div>
  <div id="" class="form_left linkURL" style="display: none;">
      <label for="url"><strong>Link URL:</strong> <span style="color: red;">*</span></label><br/>
      <input id="url" type="text" name="url" value=""/>
  </div>
  <div>
    <input class="submitBtn" id="submit" name="submit" type="submit" value="Add">
  </div>
</form>

Note:-

You code will work too if you change

$(this).parent().next(".linkURL");

to

$(this).parent().next().next(".linkURL");

Answer 2

I believe the problem is with the next() functions. It only returns the immediately preceding element (jQuery docs for Next) and the .linkURL is after the immediately preceding element, I would instead change it to siblings (jQuery docs for Siblings)

    $(".pdf").click(function() {
        if($(this).prop("checked")) {
            $(this).parent().next(".uploadPDF").css("display","inline-block");
            $(".linkURL").css("display","none");
        }
    });

    $(".link").click(function() {
      if($(this).prop("checked")) {
        $(this).parent().siblings(".linkURL").css("display","inline-block");
        $(".uploadPDF").css("display","none");
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
      <div class="form_left">
        <label for="document"><strong>Name:</strong> <span style="color: red;">*</span></label><br />
        <input id="document" name="document" type="text" />
      </div>
      <div class="form_right">
        <label for="type"><strong>Format:</strong> <span style="color: red;">*</span></label> <br /> 
        <input type="radio" name="radio_Type" class="pdf" value="PDF" /> PDF
        <input type="radio" name="radio_Type" class="link" value="Link" /> Link
      </div>
      <div id="" class="form_left uploadPDF" style="display:none">
        <label for="pdf"><strong>Attach PDF:</strong> <span style="color: red;">*</span></label><br/>
        <input type="file" name="fileToUploadPDF" id="fileToUploadPDF"> 
      </div>
      <div id="" class="form_left linkURL" style="display: none;">
        <label for="url"><strong>Link URL:</strong> <span style="color: red;">*</span></label><br/>
        <input id="url" type="text" name="url" value=""/>
      </div>
      <div>
        <input class="submitBtn" id="submit" name="submit" type="submit" value="Add">
      </div>
    </form>