title: how to display tab in right side using html CSS bootstrap JavaScript
body: <p>what i am trying to do is in my below code when i click on checkbox2 then tab panes red green and blue is show in right side above the add new button and when i unclick then add new button is coming in original position.</p>
  <p>i try to make this type functionality <a href="https://kapwi.ng/w/3zPHfzol" rel="nofollow noreferrer">https://kapwi.ng/w/3zPHfzol</a> any help in this</p>
  <p>in below my code i tried using if else condition but its not work</p>
  <p>can anyone help me out this functionality.</p>
  <p>i try to make when i click on first checkbox1 then variant and add new tab is show and when i lick on check box 2 then red green blue tab pan is show in above the add new tab and when i uncheck the checkbox2 then add new tab is coming ur own position. this type  functionality i want to create.</p>
  <p>my expected functionality look like this <a href="https://kapwi.ng/w/3zPHfzol" rel="nofollow noreferrer">https://kapwi.ng/w/3zPHfzol</a></p>
  <p>its vey thankful</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("mardi");
    if (checkBox.checked == true){
      mardi.style.display = "block";
       xyz.style.display = "block";
      
    } else {
       mardi.style.display = "none";
        xyz.style.display = "none";
       
    }
  }
  
  function addDay(e) {
    document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container-2{
  display:flex}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
   
  
  &lt;div class="container"&gt;
    &lt;input class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" /&gt;1
    &lt;input class="mr-1" type="checkbox" value="mardi" id="myCheck" onclick="myFunction()" /&gt;2
    &lt;input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" /&gt;3
    &lt;input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" /&gt;4
    &lt;input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" /&gt;5
    &lt;input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" /&gt;6
    &lt;input class="mr-1" type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" /&gt;7
  &lt;/div&gt;
  
  
  &lt;div class="container-2"&gt;
    &lt;div class="row mr-2 ml-0" style="display:none;" id="lundi"&gt;
    
      &lt;br&gt;
    &lt;!-- Nav pills --&gt;
    &lt;ul class="nav nav-pills" role="tablist"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link active" data-toggle="pill" href="#homemade"&gt;variant&lt;/a&gt;
      &lt;/li&gt;
      
    &lt;/ul&gt;
  
    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content"&gt;
      &lt;div id="homemade" class="container tab-pane active"&gt;&lt;br&gt;
      &lt;button type="button" class="btn btn-primary"&gt;ADD NEW&lt;/button&gt;
        
      &lt;/div&gt;
        &lt;/div&gt;
    
    
    
    &lt;/div&gt;
    
    
    &lt;div class="row mr-2 ml-0" style="display:none;" id="mardi"&gt;
        &lt;br&gt;
    &lt;!-- Nav pills --&gt;
    
    &lt;ul class="nav nav-pills" role="tablist" &gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link active" data-toggle="pill" href="#home"&gt;Colors&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    
  
  &lt;/div&gt;
    &lt;!-- Tab panes --&gt;
    &lt;div class="tab-content" id="xyz"  style="display:none;"&gt;
      &lt;div id="home" class="container tab-pane active"&gt;&lt;br&gt;
          &lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs" role="tablist"  id="abc"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link active" data-toggle="tab" href="#home"&gt;Red&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" data-toggle="tab" href="#menu1"&gt;Green&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" data-toggle="tab" href="#menu2"&gt;Blue&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    
    
    &lt;div class="row mr-2 ml-0" style="display:none;" id="mercredi"&gt;test&lt;/div&gt;
    &lt;div class="row mr-2 ml-0" style="display:none;" id="jeudi"&gt;Some content4&lt;/div&gt;
    &lt;div class="row mr-2 ml-0" style="display:none;" id="vendredi"&gt;Some content5&lt;/div&gt;
    &lt;div class="row mr-2 ml-0" style="display:none;" id="samedi"&gt;Some content6&lt;/div&gt;
    &lt;div class="row mr-2 ml-0" style="display:none;" id="dimanche"&gt;Some content6&lt;/div&gt;
  &lt;/div&gt;
  
  
          
        </code></pre>
  </div>
  </div>
  </p>