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

I'm trying to transform the above select values into an accordion, I was able to successfully create new button element with the correct values for the heading, but when I try to append each select values as child, inside the button(should work as accordion), is not working correctly, its just adds values to the heading, please see: 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);
    }
}

I'm open to any other suggestions, as this is aprt of my learning path, basically I'm trying to create accordion using select, so any help would be nice.

Answer 1

You can specify a max-height: 0; when you aren't hovering over the button. When you hover, set the max-height to an arbitrary number, I used 200px so you get the accordion effect.

 var element = document.getElementById('pList'); var children = element.children; var filtered = []; var filterItens = []; // Create Headings for the Button eg: --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>

You may need to tweak the initial max-height: 40px; that I set to your liking as well as the :hover state's max-height .

If you want an exact max-height you can handle the hover with Javascript. Count the children of the hovered element, add their outer heights together, and add style attribute via JS to the parent and remove it on blur.

Also, rather than using float for the + icon switch to an absolute position for this instance. Using float here, with max-width causes the + icon to be hidden when not hovered.