Clever Geek Handbook

Symfony2 Change style of elements on every loop

So, I have a folding CSS page for the FAQ. When using static text, everything works fine. However, I am not using static text and I am getting Q&A from the database.

Thus, using regular CSS, the folding FAQ looks like this:

          <div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <h4><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                  Collapsible Group Item #1
                </a></h4>
              </div>
              <div id="collapseOne" class="accordion-body collapse"  >
                <div class="accordion-inner">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. 
                    <br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum varius dapibus. Sed hendrerit porta felis at sollicitudin. 
                    <br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum varius dapibus. Sed hendrerit porta felis at sollicitudin. 

                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <h4><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                  Collapsible Group Item #2
                </a></h4>
              </div>
              <div id="collapseTwo" class="accordion-body collapse"  >
                <div class="accordion-inner">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. 
                </div>
              </div>
            </div>
          </div>

With my for loop in action, it looks like this:

          <div class="accordion" id="accordion2">
          {% for faq in faqs%}
            <div class="accordion-group">
              <div class="accordion-heading">
                <h4><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                  {{faq.question}}
                </a></h4>
              </div>
              <div id="collapseOne" class="accordion-body collapse"  >
                <div class="accordion-inner">
                    {{ faq.answer }}
                </div>
              </div>
            </div>
         {% endfor %}
          </div>

The problem is that the loop loads the same classes every time. So no matter what question I click on, it will always open the first question.

Is there any way I can change the class on every loop? For example:

1st loop: id="collapseOne"
2nd loop: id="collapseTwo"

etc...

+3


source to share


3 answers


You can use TWIG Loop variable to dynamically generate a different value as an example:

<div id="collapse-{{ loop.index }}" class="accordion-body collapse"  >

Create something like:

collapse-1



Decay-2

...

If you want collapseOne, collapseTwo, etc., you need to translate the key

+1


source


You can use the loop index ( http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable )

{{ loop.index }}

For example:



<div class="accordion" id="accordion2">
      {% for faq in faqs%}
        <div class="accordion-group">
          <div class="accordion-heading">
            <h4><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse{{ loop.index }}">
              {{faq.question}}
            </a></h4>
          </div>
          <div id="collapse{{ loop.index }}" class="accordion-body collapse"  >
            <div class="accordion-inner">
                {{ faq.answer }}
            </div>
          </div>
        </div>
     {% endfor %}
      </div>

This makes identifiers like "collapse1"

+1


source


try using "cycle" in twig (twig API: cycle )

    {% for faq in faqs %}
        <div id="{{ cycle(['collapse-1', 'collapse-2']" class="accordion-body collapse"  >
    {% endfor %}

Hope this helps you,

Roger

0


source






More articles:


All Articles