osem-fcy/app/views/conferences/index.html.haml

.container
  .row
    .col-md-12
      .page-header
        %h2 Upcoming Conferences
  - @current.each do |conference|
    = render '/conferences/conference_details', conference: conference
  - if @antiquated and @antiquated.any?
    .row
      .col-md-12
        %p.text-right
          %button{ type: 'button', class: 'btn btn-link btn-sm', 'data-toggle' => 'collapse', 'data-target' => '#antiquated', 'aria-expanded' => 'true', 'aria-controls' => 'antiquated'}
            Older conferences
            %span.notranslate
              = "(#{@antiquated.count})"
            %i.fa-solid.fa-chevron-right
            %i.fa-solid.fa-chevron-down{ style: 'display: none' }
    #antiquated.collapse
      - @antiquated.each do |conference|
        = render '/conferences/conference_details', conference: conference
  %p
    Add the events to your calendar:
    %span.btn-group
      = link_to("Days only", calendar_url(protocol: 'webcal', format: 'ics'), class: 'btn btn-default')
      = link_to("Detailed", calendar_url(protocol: 'webcal', format: 'ics', full: true), class: 'btn btn-default')

-content_for :script_body do
  :javascript
    $('#antiquated').on('hidden.bs.collapse', function () {
      $( ".fa-chevron-down" ).hide();
      $( ".fa-chevron-right" ).show();
    })
    $('#antiquated').on('shown.bs.collapse', function () {
      $( ".fa-chevron-down" ).show();
      $( ".fa-chevron-right" ).hide();
    })