How to fix accordion icon switching for all list items?

Store Design
1

Hello, so I created an accordion for FAQ. That works fine, but in each li I have a

+

and a

-

. I’m trying to have all show the + when accordion is closed, and a - when accordion is open. Right now when clicked on, only the first li is swapping between + and -. The other issue, is the rest of the li when clicked control the first li swapping the + and -. Please advise.

CSS:

#faq-show {
    display: inline-flex;
    text-align: right;
    margin-left: 25px;
   	display: show; 
  }
  
  #faq-hide {
    display: none;
    text-align: right;
    margin-left: 25px;
  }

javascript

function showEl() {
	let x = document.getElementById('faq-show');
        let y = document.getElementById('faq-hide');
		if (x.style.display === "none") {
    		x.style.display = "inline-flex";
          	y.style.display = "none";
  		} else {
    		x.style.display = "none";
          	y.style.display = "inline-flex";
  		}
   }

accordion in liquid


    ## {{ section.settings.faqSectionHeaderTitle }}
    

{{ section.settings.faqSectionHeaderSubTitle }}

  

	
    {% for block in section.blocks %}
    

    - {% if block.settings.title != blank %}
          {{ block.settings.title }}
        

  +

        

  -

          {% endif %}
      
      
      
    

            {% if block.settings.bodyLink != blank %}
        - {{ block.settings.bodyLink }}

      

        	  {% endif %}
            {% if block.settings.bodyLink2 != blank %}
        - {{ block.settings.bodyLink2 }}

      

        	  {% endif %}
            {% if block.settings.bodyLink3 != blank %}
        - {{ block.settings.bodyLink3 }}

      

        	  {% endif %}
           {% if block.settings.bodyLink4 != blank %}
        - {{ block.settings.bodyLink4 }}

      

        	  {% endif %}
    
    
  

    {% endfor %}
2

Hi @Mako3 ,

Because when JS works, it will get id faq-show and faq-hide first, so you need to change the code like this:

CSS:

.faq-show {
display: inline-flex;
text-align: right;
margin-left: 25px;
display: show;
}

.faq-hide {
display: none;
text-align: right;
margin-left: 25px;
}
javascript
function showEl(index) {
let x = document.getElementById(‘faq-show’+index);
let y = document.getElementById(‘faq-hide’+index);
if (x.style.display === “none”) {
x.style.display = “inline-flex”;
y.style.display = “none”;
} else {
x.style.display = “none”;
y.style.display = “inline-flex”;
}
}

accordion in liquid

{{ section.settings.faqSectionHeaderTitle }}

{{ section.settings.faqSectionHeaderSubTitle }}

{% for block in section.blocks %} {% endfor %}

If this helps, please kindly mark it as a solution. Thank you and good luck.

3

That worked! Thank you so much :blush: