top moving the accordion next to opened accordion Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of top moving the accordion next to opened accordion without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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;
}
We are here to answer your question about top moving the accordion next to opened accordion - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji