Scroll to top on click for a sub drop down menu in html

I like to access content from sub drop down menu immediately without using scroll bar on left hand side as shown in the figure using html

Here is the code I used

<div class="col-sm-12">
    <br/>
    <button class="collapsible">Drop Down Main</button>
        <div class="content"><p></p>
     <ul>
        <button class="collapsible">Drop Down-1</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p><b>Line 3</b></p>
        </div>
        </ul>
            
            
        <ul>
        <button class="collapsible">Drop Down-2</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p> <b>Line 3</b></p>   
        </div>
        </ul>
            
        <ul>
          <button class="collapsible">Drop Down-3</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p> <b>Line 3</b></p>       
        </div>
        </ul>
            
<ul>
        <button class="collapsible">Drop Down-4</button>
        <div class="content"><p></p>
            <p>Line1 </p>
            <p>Line 2</p>
            <p> <b>Line 3</b></p>       
            </div>
        </ul>   
    </div>
    <br/>

This is the style code I used for drop down and sub drop downs.

.collapsible {
  background-color: #01579b;
  color: white;
  cursor: pointer;
  padding: 18px;
   width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.active, .collapsible:hover {
  background-color: #0043b3;
}
    
.content {
  padding: 0 18px;
  max-height: 0px;
  overflow: auto;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;

}

Please let me know how we can use html to achieve this. Thanks in advance.

Solution

We can use the standard <details> HTML element:

let details = document.querySelectorAll('details>details');

// add toggle event on all sub sections
details.forEach(d => {
  d.addEventListener("toggle", event => {
    let current = event.target;
    // close all others
    if (current.open){
      details.forEach(e => {
        if (current !== e) e.open = false;
      });
     
       current.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
     }
  });
});

body{
 padding: 1rem;
}
summary {
  background-color: rgb(46, 46, 255);
  color: white;
  padding: 0.3rem;
  cursor: pointer;
}

details>details {
  margin-left: 1rem;
}

details>details>summary {
  background-color: rgb(86, 86, 245);
}

details>details[open]>summary {
  background-color: rgb(105, 166, 245);
}

details .info {
  padding: .5rem;
  border: 1px solid gray;
}

<details>
  <summary>Drop down main</summary>
  <details>
    <summary>Drop down 1</summary>
    <div class="info">ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt.</div>
  </details>
  <details>
    <summary>Drop down 2</summary>
    <div class="info">TWO Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, illo exercitationem sequi voluptatum tempora minus rem amet magnam. Necessitatibus nihil dolores eaque sed quaerat ducimus aliquid cupiditate impedit quam laboriosam odit sequi,
      numquam fuga neque! Optio aut at, omnis quasi amet cum rem id fuga velit error cupiditate commodi neque.</div>
  </details>
  <details>
    <summary>Drop down 3</summary>
    <div class="info">THREE Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ad saepe ex obcaecati expedita nulla, nihil laborum esse excepturi natus amet non eligendi atque sint. Tenetur molestias perspiciatis libero perferendis, autem earum et eius numquam
      repellat commodi sint dignissimos veritatis eaque ratione voluptatum nam molestiae voluptatibus ipsum illum! Id dolor quos consequuntur vero cumque tenetur, quaerat quam odit non illum exercitationem voluptates! Minima, quia dolore? Accusamus libero?</div>
  </details>
  <details>
    <summary>Drop down 4</summary>
    <div class="info">FOUR Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias cupiditate nobis odio iusto, ratione laborum ipsa tempora eos porro repellat recusandae dolore quasi adipisci explicabo consequuntur omnis eveniet asperiores culpa!</div>
  </details>
</details>

We can use Element.scrollIntoView() to bring element in view. Play with the method arguments to get desired results.