0

My fiddle is here: http://jsfiddle.net/L4hkrwa6/14/

The HTML code is here:

<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>

When I click on Show1 (and when the page is loaded initially) I want to only see the Input 'OnlyMe'.

When I click on Show2 I want to only see the Inputs 'MeAnd23Submit', '23' and the submit button.

When I click on Show3 I want to only see the Inputs 'MeAnd23Submit2', '23' and the submit button.

I tried several combinations but nothing seems to work, I would appreciate any help...

Thanks in advance!

Update: This is just a small example with the necessary items to understand the problem. In the "real case" I have many more input fields and I would like to not copy the fields in multiple tab-panes.

misanthrop
  • 771
  • 7
  • 32

1 Answers1

1

Have you tried this: forked fiddle

<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>
JuanDM
  • 1,250
  • 10
  • 24
  • Yes this is how my site originally looked like... However I dont want to copy the fields, as those are more then 1 dozen and I dont want to make possible changes always two times. I thought there might be a more elegant way to accomplish this. – misanthrop Jul 12 '18 at 13:18
  • Well, I think maybe you will accomplish that using JQuery – JuanDM Jul 12 '18 at 13:25
  • Is there not a straight forward way to solve that with bootstrap and html only? / I upvoted your answer as it is giving a correct answer to my original question! – misanthrop Jul 12 '18 at 13:28
  • I cant figure out an only bootstrap way, take a look at this JS in the `navs` docs https://getbootstrap.com/docs/4.0/components/navs/#via-javascript – JuanDM Jul 12 '18 at 13:36