nested accordion help!

stig11686
New Member
1 0 0

I'm trying to make a nested accordion that's customisable using Shopify blocks

my problem is the my block type of slide is not outputting inside a nested if statement as per below. JS included for completeness, though this seems to be working as I'd hoped. Any ideas gratefully received!

 

 

{% for block in section.blocks %}
{% if block.type == 'header' %}
<div class="faq-header">
	<h3>{{block.settings.header}}</h3>
</div>
	<div class="panel">
      {% if block.type == 'slide' %}

         <div class="accordion" id={{id}}>{{block.settings.question}}<span></span></div>
         <div class="container">
            <div class="content">
                <div>{{block.settings.answer}}</div>
            </div>
        </div>

      {% endif %}
	</div>
{% endif %}

	</div>
{% endfor %}

<script type="text/javascript">
  const headers = Array.from(document.getElementsByClassName('faq-header'))
  const panels = Array.from(document.getElementsByClassName('panel'))
  
  for(let i = 0; i < headers.length; i++){
    headers[i].addEventListener('click', function(){
      console.log('clicked')
  		panels[i].classList.toggle('panel-open')
    })
  }

  
</script>

 

 

0 Likes