HTML
            


            
PUG
            
.multi-block-information
  ul.form-group-radio.form-group-radio-iconified(role="radiogroup")
    li
      .radio
        input(type='radio', name='type-paiement', checked)#type-paiement-1
        label(for='type-paiement-1') 
          i.maificon.maificon-credit-card(aria-hidden='true')
          p Prélèvement en 1 fois
      button.block-information-handler.checkbox-tab#first-tabradio(data-target='#panel_tabradio_first', data-toggle='tab', role='tab', aria-controls='first', aria-selected='false')
        span.sr-only Afficher le détail pour l'option Prélèvement en 1 fois
      button.block-information-handler.collapse-handler(data-toggle="collapse", data-target="#collapse-cnt-multi-radio1", aria-expanded="false") 
        span.sr-only Afficher le détail pour l'option Prélèvement en 1 fois
      .collapse.collapse-info#collapse-cnt-multi-radio1
        .collapse-content.d-md-none.d-block
          button.close(data-toggle="collapse", data-target="#collapse-cnt-multi-radio1", aria-expanded="false", aria-label='fermer')
          .title
            i.maificon.maificon-credit-card(aria-hidden="true")
            span Prélèvement en 1 fois
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    li
      .radio
        input(type='radio', name='type-paiement')#type-paiement-2
        label(for='type-paiement-2') 
          i.maificon.maificon-credit-card(aria-hidden='true')
          p Prélèvement en 12 fois
      button.block-information-handler.checkbox-tab#second-tabtabradio(data-target='#panel_tabradio_second', data-toggle='tab', role='tab', aria-controls='second', aria-selected='false')
        span.sr-only Afficher le détail pour l'option Prélèvement en 12 fois
      button.block-information-handler.collapse-handler(data-toggle="collapse", data-target="#collapse-cnt-multi-radio2", aria-expanded="false")
        span.sr-only Afficher le détail pour l'option Prélèvement en 12 fois
      .collapse.collapse-info#collapse-cnt-multi-radio2
        .collapse-content.d-md-none.d-block
          button.close(data-toggle="collapse", data-target="#collapse-cnt-multi-radio2", aria-expanded="false", aria-label='fermer')
          .title
            i.maificon.maificon-credit-card(aria-hidden="true")
            span Prélèvement en 1 fois
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          br/
          | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    li
      .radio
        input(type='radio', name='type-paiement')#type-paiement-3
        label(for='type-paiement-3') 
          i.maificon.maificon-cheque(aria-hidden='true')
          p Chèque en 1 fois
      button.block-information-handler.checkbox-tab#third-tabtabradio(data-target='#panel_tabradio_thrid', data-toggle='tab', role='tab', aria-controls='third', aria-selected='false')
        span.sr-only Afficher le détail pour l'option Chèque en 1 fois
      button.block-information-handler.collapse-handler(data-toggle="collapse", data-target="#collapse-cnt-multi-radio3", aria-expanded="false", aria-label='fermer')
        span.sr-only Afficher le détail pour l'option Chèque en 1 fois
      .collapse.collapse-info#collapse-cnt-multi-radio3
        .collapse-content.d-md-none.d-block
          button.close(data-toggle="collapse", data-target="#collapse-cnt-multi-radio3", aria-expanded="false", aria-label='fermer')
          .title
            i.maificon.maificon-cheque(aria-hidden='true')
            span Chèque en 1 fois
          | Par chèque, en une seule fois, pour le montant de la cotisation qui vous sera réclamé ultérieurement.
  #ueberTabB.tab-content.d-none.d-md-block
    #panel_tabradio_first.tab-pane.fade(role='tabpanel', aria-labelledby='first-tabtabradio')
      .collapse-content
        button.close(aria-label='fermer')
        .title
          i.maificon.maificon-credit-card(aria-hidden="true")
          span Prélèvement en 1 fois
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    #panel_tabradio_second.tab-pane.fade(role='tabpanel', aria-labelledby='second-tabradio')
      .collapse-content
        button.close(aria-label='fermer')
        .title
          i.maificon.maificon-credit-card(aria-hidden="true")
          span Prélèvement en 12 fois
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        br/
        | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    #panel_tabradio_thrid.tab-pane.fade(role='tabpanel', aria-labelledby='third-tabradio')
      .collapse-content
        button.close(aria-label='fermer')
        .title
          i.maificon.maificon-cheque(aria-hidden="true")
          span Par chèque
        | Dépendances à déclarer:
        br/
        | Bâtiments, parties ou ensembles de bâtiments, y compris garages :
        br/
        | * à usage utilitaire et situés sur le même terrain ou à la même adresse qu'une habitation déclarée,
        br/
        | * séparés de l'habitation ou contigus mais sous toiture distincte
        br/
        | Toutes les dépendances, quelles que soient leurs surfaces sont à déclarer. Si un bien immobilier dispose de plusieurs dépendances, leurs surfaces au sol doivent être cumulées.