Dropdowns - pbest/offline-society GitHub Wiki

<div class="drop-target drop-fancyText">
       <div class="drop-content-hider">
             <ul class="drop-list">
             <li><a class="drop-list-item js-sync drop-list-item-active" href="events.html">Active Item</a></li>
             <li><a class="drop-list-item js-sync" href="events.html">Other Item</a></li>
             </ul>
        </div>
    </div>

<div class="drop-target drop-fancyText">
    {# These are the values of the dropdown #}
    {% set eventTypeDropDown = [
        {
            'label': 'any date',
            'active': true,
            'value': 'all'
        },
         {
            'label': 'past dates',
            'active': false,
            'value': 'me'
        },
        {
            'label': 'future dates',
            'active': false,
            'value': 'guests'
        }
    ] %}
    {# Loop through the dropdown to see what is active.  Put that in the label to reflect current state #}
    {% for item in eventTypeDropDown %}
          {% if item.active == true %} {{item.label}}
          {% else %}  {# If nothing is active, what do you say? #}
          {% endif %}
        {% endfor %}
        <div class="drop-content-hider">
             <ul class="drop-list">
             {# Now we create the dropdown list #}
             {% for item in eventTypeDropDown %}
             <li><a class="drop-list-item js-sync {% if item.active == true %}drop-list-item-active{% endif %}" href="events.html">{{item.label}}</a></li>
             {% endfor %}
             </ul>
        </div>
    </div>
    {# ------------- End dropdown ------------------#}