how to show toggle tab above the button

i want to try in my below code when i click on checkbox2 then nav tab show above the add new button.

but in my code right now tab is not show above the button when i click the colour checkbox

i try to this when i click on checkbox colour then nav tab is set or show above the add new button

plz check in my below code.

any help in this its very thankful

for refence link snapshots what i try to achieve https://www.kapwing.com/6048ac8969a2fc007f51ab42/studio/editor

i try to achieve when i click on checkbox1 then show add new button and then click checkbox2 its red green blue tab show on the place of of new button and new button is display down after the red green blue toggle

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}

.container-2{
display:flex}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
  <input class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input class="mr-1" type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input class="mr-1" type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>


<div class="container-2">
  <div class="row mr-2 ml-0" style="display:none;" id="lundi">
  
    <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
    </li>
    
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="homemade" class="container tab-pane active"><br>
    <button type="button" class="btn btn-primary">ADD NEW</button>
      
    </div>
      </div>
  
  
  
  </div>
  
  
  <div class="row mr-2 ml-0" style="display:none;" id="mardi">
      <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
    </li>
   
   
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
        <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Red</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>Red</h3>
      
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Green</h3>
      
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Blue</h3>
      
    </div>
  </div>
      
    </div>
    
   
  </div>
  
  </div>
  <div class="row mr-2 ml-0" style="display:none;" id="mercredi">test</div>
  <div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
  <div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
  <div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
  <div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

how to show toggle tab above the button

0 Answers