jQueryをもっとスマートにかけないでしょうか。

$("input[name='radio-320']").change(function(){
   if($(this).val()=="出席"){

こんな風に書けちゃいますよ

easingを使えば色々アニメーションしますよ

var EASING=["easeOutElastic","easeInOutQuint",
"easeInOutSine","easeInOutBack","easeOutExpo",
"easeOutCirc","easeInOutCirc","easeOutBounce"];
 $(function(){
  $("input[name='radio-320']").change(function(){
   if($(this).val()=="出席"){
    $(".with-option.parent01").show(500,EASING[Math.floor(Math.random()*EASING.length)]);
   }else{
    $(".with-option.parent01").hide(500,EASING[Math.floor(Math.random()*EASING.length)]);
   }
  });
 })

function slideToggle(radioName, slideClass) {
  var radio = "input[name='" + radioName + "']";
  var effective = $(radio).first().val();

  $(radio).change(function() {
    ($(this).val() === effective)
      ? $(slideClass).slideDown()
      : $(slideClass).slideUp();
  })
  .trigger('change');
}

slideToggle('radio-320', '.parent01');
slideToggle('radio-321', '.parent02');

「項目1つ目を選択で表示」で決めうちです。変更ありなら引数を追加で。

 相対位置を指定する

相対的な位置を指定すれば .parent01, .parent02 の名前にとらわれる事から解放されると思います。
jQuery で表示/非表示を制御するなら次のように。

• ラジオボタンにチェックをしたら他の項目を表示/非表示 - JSFiddle

<dl id="sample">
  <dd>
    <span class="wpcf7-form-control-wrap radio-320">
      <span class="wpcf7-form-control wpcf7-radio">
        <span class="wpcf7-list-item first">
          <label>
            <input type="radio" name="radio-320" value="出席">&nbsp;<span class="wpcf7-list-item-label">出席</span>
          </label>
        </span>
        <span class="wpcf7-list-item last">
          <label>
            <input type="radio" name="radio-320" value="欠席">&nbsp;<span class="wpcf7-list-item-label">欠席</span>
          </label>
        </span>
      </span>
    </span>
    <p></p>
    <div class="with-option parent01">
      <div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
      <p>
        <span class="wpcf7-form-control-wrap text-567">
          <input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人">
        </span>
      </p>
    </div>
  </dd>
  <dd>
    <span class="wpcf7-form-control-wrap radio-320">
      <span class="wpcf7-form-control wpcf7-radio">
        <span class="wpcf7-list-item first">
          <label>
            <input type="radio" name="radio-320" value="出席">&nbsp;<span class="wpcf7-list-item-label">出席</span>
          </label>
        </span>
        <span class="wpcf7-list-item last">
          <label>
            <input type="radio" name="radio-320" value="欠席">&nbsp;<span class="wpcf7-list-item-label">欠席</span>
          </label>
        </span>
      </span>
    </span>
    <p></p>
    <div class="with-option parent02">
      <div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
      <p>
        <span class="wpcf7-form-control-wrap text-567">
          <input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人">
        </span>
      </p>
    </div>
  </dd>
</dl>

<script>
'use strict';
jQuery('#sample').on('change', '.wpcf7-form-control-wrap.radio-320', function (event) {
  var input = event.target, div;


  if (!jQuery(input).is('input[name="radio-320"]')) {
    return;
  }

  div = jQuery(event.currentTarget).nextAll('.with-option');

  switch (input.value) {
    case '出席':
      div.show('slow');
      break;
    case '欠席':
      div.hide('slow');
      break;
  }
});
</script>

 CSS Transitions

CSS Transitions で表示制御するのが最良ですが、height: auto; を transition の対象に指定できないようです。
JavaScript で element.clientHeight を style 属性に埋め込むことで解決できます。

• auto height な CSS Transitions | Unformed Building
• css3 - How can I transition height: 0; to height: auto; using CSS? - Stack Overflow

Re: cotton88 さん

$("input[name='radio-320']").change(function() {
  var radioJoin = $(this);
  var op = $(".with-option.parent01");
  (radioJoin.val() === "出席") ? op.addClass("show") : op.removeClass("show");
});

.with-option.parent01{
  transition: 1s ease;
  opacity: 0;
  visibility: hidden;
  /*width: 0;*/
  height: 0;
  transform: translateX(-200%);
}

.with-option.parent01.show {
  opacity: 1;
  visibility: visible;
  /*width: 100%;*/
  height: 100%;
  transform: translateX(0);
}

cssに動きは入れたので、ここらは好きにデザインできます。addClass等をfadeとかに変えてもいけるかと。jQuery3.0とかだと問題ないと思いますがアレかもしれないのでclassを入れるのが良かろうと思います。
keyframesでアニメーションを入れたりとかいろいろできます。

jsFiddleでのサンプル(transform)&スライドイン(横)
jsFiddleでのサンプル(スライドイン・アウト)
jsFiddleでのサンプル(transform)&スライドイン(縦)