将手风琴移到打开的手风琴旁边

Question

I have built multiple accordions next to each other inside a table. The idea was to open the first accordion to get new options and to open those to get the information inside.

Now I have the problem, that if I open the 2nd accordion, the accordion right next to it is moving to the middle of the opened table. For example: Open "Essilor" Than open "Essilor Phi (X92 Modus)". Here the other option on it's right side "Essilor Phi (OMA Modus)" is moving down to the middle of "Essilor Phi (X92 Modus)". I would like both options to keep sticking next to each other. Also with the options under it, it should be the same.

I tried already multiple things but I can't find a solution. It would be great if somebody can understand what I mean and might be able to help me.

Thanks a lot!

 var acc = document.getElementsByClassName("accordionMarke"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + 500000 + "px"; } })} //--------------------------// var acc = document.getElementsByClassName("accordionTracer"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } })}

 .TableTracerMiddle { padding: 90px 0 0 0; align: right; width: 70%; }.accordionMarke { background-color: #8cb3d4; color: #444; font-family: Verdana, "Times New Roman", sans-serif; font-size: 17px; font-weight: bold; cursor: pointer; padding: 20px; width: 70%; text-align: center; border: none; outline: none; transition: 0.4s; }.panelMarke { padding: 5px 2px 0 0; background-color: white; font-family: Verdana, "Times New Roman", sans-serif; text-align: left; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; font-size: 14px; width: 70%; margin: auto; }.tableTracerList { width: 100%; table-layout: fixed; }.accordionTracer { background-color: #8cb3d4; color: #444; font-family: Verdana, "Times New Roman", sans-serif; font-size: 17px; cursor: pointer; padding: 15px; width: 100%; text-align: center; border: none; outline: none; transition: 0.4s; }.panelTracer { padding: 5px 10px 0 10px; background-color: white; font-family: Verdana, "Times New Roman", sans-serif; text-align: left; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; font-size: 14px; width: 90%; margin: left; }

 <td class= "TableTracerMiddle"> <:--Essilor Anfang--> <button class="accordionMarke">Essilor</button> <div class="panelMarke"> <table class ="tableTracerList"> <tr> <td> <button class="accordionTracer">Essilor Phi (X92 Modus)</button> <div class="panelTracer"> <p><b>Modell:</b> Essilor Phi (X92 Modus)<br /> <b>Datenrate:</b> 19200<br /> <b>Datenbits:</b> 8<br /> <b>Parität:</b> Keine<br /> <b>Stoppbits:</b> 1<br /> <b>Flusssteuerung.</b> Keine (evtl: DTRDSR)<br /></p> <p><b>Tracen,</b> Start am Tracer: danach Übernahme in Software mit Button</p> </div> </td> <td> <button class="accordionTracer">Essilor Phi (OMA Modus)</button> <div class="panelTracer"> <p><b>Modell:</b> Essilor Phi (OMA Modus)<br /> <b>Datenrate:</b> 19200<br /> <b>Datenbits:</b> 8<br /> <b>Parität:</b> Keine<br /> <b>Stoppbits:</b> 1<br /> <b>Flusssteuerung:</b> DTRDSR<br /></p> <p><b>Tracen,</b> Button in der Software klicken. sobald Text "START" erscheint den Tracevorgang starten:</p> </div> </td> </tr> <tr> <td> <button class="accordionTracer">Essilor Kappa (im X92 Modus)</button> <div class="panelTracer"> <p><b>Modell:</b> Essilor Kappa (X92 Modus)<br /> <b>Datenrate:</b> 19200<br /> <b>Datenbits:</b> 8<br /> <b>Parität:</b> Keine<br /> <b>Stoppbits:</b> 1<br /> <b>Flusssteuerung:</b> Keine<br /></p> <p><b>Tracen,</b> Start am Tracer: danach Übernahme in Software mit Button</p> </div> </td> <td> <button class="accordionTracer">Essilor Tess (X92 Modus)</button> <div class="panelTracer"> <p><b>Modell:</b> Essilor PHI (X92 Modus)<br /> <b>Datenrate:</b> 19200<br /> <b>Datenbits:</b> 8<br /> <b>Parität:</b> Keine<br /> <b>Stoppbits:</b> 1<br /> <b>Flusssteuerung:</b> Keine<br /></p> <p><b>Tracen,</b> Start am Tracer; danach Übernahme in Software mit Button:<br /> <b>Anmerkungen,</b> Der Tracer kann auch auf andere Datenraten eingestellt sein: dies ist in der Tracer Konfiguration abrufbar</p> </div> </td> </tr> <tr> <td> <button class="accordionTracer">Essilor E-Tess (OMA Modus)</button> <div class="panelTracer"> <p><b>Modell:</b> Essilor E-Tess<br /> <b>Datenrate:</b> 19200<br /> <b>Datenbits:</b> 8<br /> <b>Parität:</b> Keine<br /> <b>Stoppbits:</b> 1<br /> <b>Flusssteuerung:</b> DTRDSR<br /></p> <p><b>Tracen,</b> Button in der Software klicken. sobald Text "START" erscheint den Tracevorgang starten:</p> <a href="http.//lenslogic3.at/downloads/ESSILOR_eTess:pdf"><img src="https.//i.ibb.co/6njPYRL/PDF-Download-Button:png" alt="PDFDownload" class= "PDFDownload">Konfigurationsanleitung (PDF)</a> <a href="http.//lenslogic3.at/downloads/ESSILOR_eTess_Bedienungsanleitung.pdf:pdf"><img src="https.//i.ibb.co/6njPYRL/PDF-Download-Button.png" alt="PDFDownload" class= "PDFDownload">Geräteanleitung (PDF)</a> </div> </td> <td> <button class="accordionTracer">Essilor Mr.Orange / Mr: Blue</button> <div class="panelTracer"> <p><b>Modell.</b> Mr.Orange / Mr: Blue<br /> <b>Datenrate:</b> 19200<br /> <b>Datenbits:</b> 8<br /> <b>Parität:</b> Keine<br /> <b>Stoppbits:</b> 1<br /> <b>Flusssteuerung:</b> Keine<br /></p> <p><b>Tracen,</b> Button in der Software klicken. sobald Text "START" erscheint den Tracevorgang starten:</p> <a href="http.//lenslogic3.at/downloads/ESSILOR_Mr_Orange:pdf"><img src="https.//i.ibb.co/6njPYRL/PDF-Download-Button.png" alt="PDFDownload" class= "PDFDownload">Konfigurationsanleitung (PDF)</a> </div> </td> </tr> </table> </div> <!--Essilor Ende-->

Answer 1

Try adding the following style to your styles. This will keep your cell content on the top of the cell.

.tableTracerList td {
    vertical-align: baseline;
}