Javascript se chevauchent avec curseur causant des problèmes de colonne Bootstrap

Question

J'essaie d'avoir une division entre les colonnes et un ensemble de curseurs qui sont placés les uns sur les autres. L'objectif est que les boutons affichent le contenu via une bascule d'effondrement tout en les déplaçant avec une combinaison d'info-bulles image/nombre afin que les utilisateurs puissent voir ce qu'ils font glisser tout en obtenant les informations sur les différentes icônes qu'ils glissent. Voici ce qui se passe

• Lorsqu'elle est cochée, la colonne affiche une hauteur de 0 ou 1 pixel.
• Javascript pour le curseur apparaît, mais tend à superposer au-dessus du contenu du bouton
• Lors de la création d'espacement pour la colonne, rien ne permet en particulier l'espacement divisé à deux colonnes à gauche et à droite
• Lorsque vous appuyez sur le bouton pour la div divisée, les changements de contenu ayant des boutons se déplacer indépendamment de la modification.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
     <div class="col-xs-6"> 
 
     <div class="spacer"> 
 
     <div class = 'slider' id='slider1'></div> 
 
     <div class = 'slider' id='slider2'></div> 
 
     <div class = 'slider' id='slider3'> </div> 
 
     <div class = 'slider' id='slider4'> </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </div> 
 
\t  <div class="col-xs-6"> 
 
     <div class="spacer"> 
 

 
     <button type="button" data-target="#ConditionOne" class="btn btn-default" data-toggle="collapse">Healthy</button> 
 
     <div id="ConditionOne" class="collapse"> 
 
      None 
 
\t </div> 
 

 
     <button type="button" data-target="#ConditionTwo" class="btn btn-default" data-toggle="collapse">Okay</button> 
 
     <div id="ConditionTwo" class="collapse" > 
 
      &lt;textarea id=&#34;conditionTwoInfo&#34; name=&#34;conditionTwoInfo&#34;&gt;Second Conditional Description&lt;/textarea&gt; 
 
     </div> \t 
 
     <button type="button" data-target="#ConditionThree" class="btn btn-default" data-toggle="collapse">Not Okay</button> 
 
     <div id="ConditionThree" class="collapse" > 
 
      None 
 
     </div> \t 
 

 
     <button type="button" data-target="#ConditionFour" class="btn btn-default" data-toggle="collapse">Dead</button> 
 
     <div id="ConditionFour" class="collapse"> 
 
      &lt;textarea id=&#34;conditionFourInfo&#34; name=&#34;conditionFourInfo&#34;&gt;Final Conditional Description&lt;/textarea&gt; 
 
     </div> 
 
     </div>

Comment dois-je gérer à la fois la question de la colonne ainsi que le bouton de déclenchement problème que je suppose qu'ils sont liés.

Answer 1

D'abord ce que j'ai fait est d'obtenir la hauteur du curseur. De là, je Hardcoded la hauteur du curseur plus un décalage

.slidespace { height: 275px; //Can be whatever you want 
      width: 100% } 

Utilisé comme un div:

<div class="slidespace">  <div class = 'slider' id='slider1'></div> 
     <div class = 'slider' id='slider2'></div> 
     <div class = 'slider' id='slider3'> </div> 
     <div class = 'slider' id='slider4'> </div> 
    </div> 

Cela m'a donné assez d'espace pour séparer les deux.