ボタンを子としてDivを追加します。

Question

<select name="pList" id="pList" style="display: none"> 
    <option value="">--ProductA--</option> 
    <option value="productA">ProdA</option> 
    <option value="productA">ProdA</option> 
    <option value="productA">ProdA</option> 
    <option value="">--ProductB--</option> 
    <option value="productB">ProdB</option> 
    <option value="productB">ProdB</option> 
    <option value="">--ProducstC--</option> 
    <option value="productC">ProdC</option> 
    <option value="productC">ProdC</option> 
    <option value="productC">ProdC</option> 
</select> 

上記の選択値をアコーディオンに変換しようとしていますが、見出しの正しい値で新しいボタン要素を正常に作成できましたが、子として選択した値は、ボタン（アコーディオンのように動作するはずです）の内部で、そのちょうど見出しに値を追加し、正常に動作していない、参照してください。 https://jsfiddle.net/bernlt/txgnk89w/5/

var element = document.getElementById('pList'); 
    var children = element.children; 
    var filtered = []; 
    var filterItens = []; 
    // Create Headings for the Button e.g: --ProductA--/--ProductB--/--ProductC-- 
    for (var i = 0; i < children.length; i++) { 
     if (children[i].textContent.startsWith('--')) { 
      filtered.push(children[i].textContent); //Heading labels 
     }else{ 
     // separate array listing all products 
      filterItens.push(children[i].textContent); 
     } 
     } 
     var prods= filtered.toString().split(','); 
     var itens = filterItens.toString().split(','); 

    for (var i in prods) { 
    var newElement = document.createElement('button'); 
    newElement.className = "accordion"; 
    newElement.innerHTML = prods[i]; 
    document.body.appendChild(newElement); 
    } 
    for (var i = 0; i < children.length; i++) { // get arraylist values 
    if (children[i].value=="productA"){ 
     var foo = document.getElementById("--ProductA--"); 
     var newElement = document.createElement('div'); 
     newElement.id = children[i].value; 
     newElement.className = "productA"; 
     newElement.innerHTML = children[i].text; 
     foo.appendChild(newElement); 
    } 
    if (children[i].value=="productB"){ 
     var foo = document.getElementById("--ProductB--"); 
     var newElement = document.createElement('div'); 
     newElement.id = children[i].value; 
     newElement.className = "productB"; 
     newElement.innerHTML = children[i].text; 
     foo.appendChild(newElement); 
    } 
    if (children[i].value=="productC"){ 
     var foo = document.getElementById("--ProducstC--"); 
     var newElement = document.createElement('div'); 
     newElement.id = children[i].value; 
     newElement.className = "productC"; 
     newElement.innerHTML = children[i].text; 
     foo.appendChild(newElement); 
    } 
} 

を私のように、他の提案に開いていますこれは私の学習の道であり、基本的にselectを使ってアコーディオンを作成しようとしているので、どんな助けもいいと思う。

Answer 1

max-height: 0;は、ボタンの上に乗っていないときに指定できます。ホバーすると、max-heightを任意の数に設定しました。私は200pxを使用したので、アコーディオン効果が得られます。

var element = document.getElementById('pList'); 
 
    var children = element.children; 
 
    var filtered = []; 
 
    var filterItens = []; 
 
    // Create Headings for the Button e.g: --ProductA--/--ProductB--/--ProductC-- 
 
    for (var i = 0; i < children.length; i++) { 
 
    if (children[i].textContent.startsWith('--')) { 
 
     filtered.push(children[i].textContent); //Heading labels 
 
    } else { 
 
     filterItens.push(children[i].textContent); // separate array listing all products 
 
    } 
 
    } 
 
    var prods = filtered.toString().split(','); 
 
    var itens = filterItens.toString().split(','); 
 

 
    for (var i in prods) { 
 
    var newElement = document.createElement('button'); //button 
 
    newElement.id = prods[i]; 
 
    newElement.className = "accordion"; 
 
    newElement.innerHTML = prods[i]; 
 
    document.body.appendChild(newElement); 
 
    } 
 

 
    for (var i = 0; i < children.length; i++) { // get arraylist values 
 
    if (children[i].value == "productA") { 
 
     var foo = document.getElementById("--ProductA--"); 
 
     var newElement = document.createElement('div'); 
 
     newElement.id = children[i].value; 
 
     newElement.className = "productA"; 
 
     newElement.innerHTML = children[i].text; 
 
     foo.appendChild(newElement); 
 
    } 
 
    if (children[i].value == "productB") { 
 
     var foo = document.getElementById("--ProductB--"); 
 
     var newElement = document.createElement('div'); 
 
     newElement.id = children[i].value; 
 
     newElement.className = "productB"; 
 
     newElement.innerHTML = children[i].text; 
 
     foo.appendChild(newElement); 
 
    } 
 
    if (children[i].value == "productC") { 
 
     var foo = document.getElementById("--ProducstC--"); 
 
     var newElement = document.createElement('div'); 
 
     newElement.id = children[i].value; 
 
     newElement.className = "productC"; 
 
     newElement.innerHTML = children[i].text; 
 
     foo.appendChild(newElement); 
 
    } 
 
    }

button.accordion { 
 
    position: relative; 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
    max-height: 40px; /* Added */ 
 
    overflow: hidden; /* Added */ 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #ccc; 
 
    max-height: 200px; /* Added */ 
 
} 
 

 
button.accordion:after { 
 
    position: absolute; /* Added */ 
 
    top: 10px; /* Added */ 
 
    right: 10px; /* Added */ 
 
    /* float: right; Remove */ 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
} 
 

 
div.Hardware { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<select name="pList" id="pList" style="display: none"> 
 
    <option value="">--ProductA--</option> 
 
    <option value="productA">ProdA</option> 
 
    <option value="productA">ProdA</option> 
 
    <option value="productA">ProdA</option> 
 
    <option value="">--ProductB--</option> 
 
    <option value="productB">ProdB</option> 
 
    <option value="productB">ProdB</option> 
 
    <option value="">--ProducstC--</option> 
 
    <option value="productC">ProdC</option> 
 
    <option value="productC">ProdC</option> 
 
    <option value="productC">ProdC</option> 
 
</select>

あなたは、私が:hover状態のmax-heightだけでなく、お好みに合わせて設定された初期max-height: 40px;を微調整する必要があるかもしれません

。

正確なmax-heightが必要な場合は、Javascriptでホバーを処理できます。ホバリングされた要素の子を数え、それらの外側の高さを追加し、JSを介して親にスタイル属性を追加し、ぼかしでそれを削除します。

また、+アイコンにfloatを使用するのではなく、このインスタンスの絶対位置に切り替えます。ここで浮動小数点数を使用すると、max-widthと表示され、+アイコンが表示されないと非表示になります。