Как создать интерактивную форму с помощью начальной загрузки

Question

Моя скрипка здесь: http://jsfiddle.net/L4hkrwa6/14/

HTML-код здесь:

<ul class="nav nav-pills nav-justified">
  <li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>

<div class="tab-content">
  <form action="test">
    <div id="Show1" class="tab-pane fade in active">
      <input type="text" name="OnlyMe"/>
    </div>
  </form>

  <form action="differentTest">
    <div id="Show2" class="tab-pane fade">
      <input type="text" name="MeAnd23Submit"/>
    </div>

    <div id="Show3" class="tab-pane fade">
      <input type="text" name="MeAnd23Submit2"/>
    </div>

    <input type="text" name="23"/>

    <input type="submit" value="submit"/>
  </form>

</div>

Когда я нажимаю на Show1 (и когда страница загружается изначально), я хочу видеть только вход "OnlyMe".

Когда я нажимаю на Show2, я хочу видеть только входы 'MeAnd23Submit', '23' и кнопку отправки.

Когда я нажимаю на Show3, я хочу видеть только входы 'MeAnd23Submit2', '23' и кнопку отправки.

Я пробовал несколько комбинаций, но ничего не получается, я был бы признателен за любую помощь...

Заранее спасибо!

Обновление: это всего лишь небольшой пример с необходимыми элементами, чтобы понять проблему. В "реальном случае" у меня есть еще много полей ввода, и я хотел бы не копировать поля в нескольких вкладках.

Answer 1

Вы пробовали это: раздвоенная скрипка

<ul class="nav nav-pills nav-justified">
  <li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>

<div class="tab-content">
  <div id="Show1" class="tab-pane fade in active">
    <form action="test">
      <input type="text" name="OnlyMe"/>
    </form>
  </div>

  <div id="Show2" class="tab-pane fade">
    <form action="differentTest">
      <input type="text" name="MeAnd23Submit"/>        
      <input type="text" name="23"/>
      <input type="submit" value="submit"/>
    </form>
  </div>

  <div id="Show3" class="tab-pane fade">
    <form action="differentTest">
      <input type="text" name="MeAnd23Submit2"/>    
      <input type="text" name="23"/>
      <input type="submit" value="submit"/>
    </form>
  </div>
</div>