templates/navigation/list.html.twig line 1

{% extends 'base.html.twig' %}

{% block body %}
    <div class="container mb-75">
        <div class="row justify-content-center mt-15">
            <ul class="items">
                <li class="item">
                    <label class="check"><input type="checkbox" data-value="hotels" checked><span>Hôtels</span></label>
                </li>
                <li class="item">
                    <label class="check"><input type="checkbox" data-value="restaurants" checked><span>Restaurants</span></label>
                </li>
                <li class="item">
                    <label class="check"><input type="checkbox" data-value="caves" checked><span>Caves</span></label>
                </li>
                <li class="item">
                    <label class="check"><input type="checkbox" data-value="shopping" checked><span>Shopping et shopping gourmand</span></label>
                </li>
                <li class="item">
                    <label class="check"><input type="checkbox" data-value="touristics-activities" checked><span>Activités touristiques</span></label>
                </li>
                <li class="item">
                    <label class="check"><input type="checkbox" data-value="sites" checked><span>Sites et monuments</span></label>
                </li>
            </ul>
        </div>

        {% for element in elements %}
            <div class="card {{ element.type }}">
                <a href="/show/{{ element.reference }}" style="text-decoration: none; text-color: black;">
                    <div class="picture" style="background-image: url('{{ element.mainPicture }}');"></div>
                    <h5 class="card-title">{{ element.name }}</h5>
                    <div class="description card-url">
                        <p>{{ element.description|html_entities }}</p>
                    </div>
                </a>
            </div>
        {% endfor %}

        <a id="button"></a>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(function() {
            $('.items input').on('change', function() {
                $('.' + $(this).attr('data-value')).fadeToggle(200);
            })

            $(window).scroll(function() {
                if (0 === $(window).scrollTop()) {
                    $('#button').removeClass('show');
                } else {
                    $('#button').addClass('show');
                }
            });

            $('#button').on('click', function (e) {
                e.preventDefault();
                $('html, body').animate({scrollTop:0}, '300');
            })
        })
    </script>
{% endblock %}