[SOLVED] Render delay on nested accordion list

Questions
1

Hi staff, and thank you all in advance!
I’m trying to create a multilevel menu in the left-panel content.
I’m using the accordion list trying to nest sub-lists in the content of the main items.

The issue I face is an ugly delay while rendering the sub-list.
What am I doing wrong?
Did someone face the same problem? Can someone help me?

Let me show you a chunk of code:

<div class="block-title">List View Accordion</div>
<div class="list accordion-list">
  <ul>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Main 01</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="block">

		<div class="list">
		  <ul>
			<li class="accordion-item"><a href="#" class="item-content item-link">
				<div class="item-inner">
				  <div class="item-title">sub item 01-01</div>
				</div></a>
			  <div class="accordion-item-content">
				<div class="block">
				  <p>01-01 content. Lorem ipsum dolor sit amet...</p>
				</div>
			  </div>
			</li>
			<li class="accordion-item"><a href="#" class="item-content item-link">
				<div class="item-inner">
				  <div class="item-title">sub item 01-02</div>
				</div></a>
			  <div class="accordion-item-content">
				<div class="block">
				  <p>01-02 content. Lorem ipsum dolor sit amet...</p>
				</div>
			  </div>
			</li>
			<li class="accordion-item"><a href="#" class="item-content item-link">
				<div class="item-inner">
				  <div class="item-title">sub item 01-03</div>
				</div></a>
			  <div class="accordion-item-content">
				<div class="block">
				  <p>01-03 content. Lorem ipsum dolor sit amet...</p>
				</div>
			  </div>
			</li>
		  </ul>
		</div>
	  
        </div>
      </div>
    </li>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Main 02</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="block">
      
	  
		<div class="list">
		  <ul>
			<li class="accordion-item"><a href="#" class="item-content item-link">
				<div class="item-inner">
				  <div class="item-title">sub item 02-01</div>
				</div></a>
			  <div class="accordion-item-content">
				<div class="block">
				  <p>02-01 content. Lorem ipsum dolor sit amet...</p>
				</div>
			  </div>
			</li>
		  </ul>
		</div>
	  
        </div>
      </div>
    </li>
  </ul>
</div>
2

Not sure what you mean. Do you live example or JSFiddle maybe?

3

Thank you a lot and sorry for my delay but I spent my holidays being sick, unable to look to a monitor or any other light (like a nosferatu).
This is the jsfiddle
https://jsfiddle.net/n8fg3d5m/
if you open the left panel you can see an accordion.
If you click, for example, the “Main 01” you can appreciate a 1 or 2 seconds delay while the list “sub item 01-01, sub item 01-02, sub item 01-03” is built.
The vertical space is instantly created but the menù items are created with a delay.
Probably I’m doing something wrong…
Thank you for your help!

4

This is some browser rendering issue. Such CSS rules can help https://jsfiddle.net/96ku42v7/

5

Awesome! Thanks for your kind help