Libre à vous !

Olicat a suggéré de classer les infos par onglets permettant ainsi aux personnes d'aller voir (ou pas voir) les informations. Antoine trouve ça très bien.

Pour cela on crée une classe tab (onglet) :

.tab {
  overflow: hidden;
  border: 1px solid white;
  background-color: #f2f5f6;
  text-align: center;
  display:inline-block;
}

.tab button {
  background-color: inherit;
  float: left;
  border: 1px solid white;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  color: #2b5385;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
        color: #ee5921;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #f2f5f6
  border-top: none;
}

du code JavaScript :

<script>
function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
// document.getElementById("defaultOpen").click();

$('document').ready(function(){document.getElementById("defaultOpen").click();});

</script>

Et enfin dans la page Drupal :

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Emission')" id="defaultOpen">Émission</button>
  <button class="tablinks" onclick="openTab(event,
                                    'References')">Références</button>
     <button class="tablinks" onclick="window.open('https://april.org/libre-a-vous-radio-cause-commune-transcription-de-l-emission-du-28-mai-2019','_blank')">Transcription</button>
    <button class="tablinks" onclick="openTab(event, 'Contact')">Contact</button>
</div>

<div id="Emission" class="tabcontent">
le résumé du programme, les podcasts
</div>

<div id="References" class="tabcontent">
La partie avec les références utiles
</div>

<div id="Contact" class="tabcontent">
La partie avec les informations de contact
</div>

Sur la VM Drupal, dans le répertoire du thème zen_april :

- modification de zen_april.info pour ajouter

scripts[] = 00-TAB.js

- Création du fichier 00-TAB.js pour mettre le code JS (sans les balises <script>)

- modification de zen_april.css pour ajouter la partie CSS

Page de test https://www.april.org/clone-tabs-libre-a-vous-diffusee-mardi-28-mai-2019-sur-radio-cause-commune-collectivites-et-logiciel

Penser à aller dans la partie Admin du site web, partie Performance pour « Supprimer les données du cache »

Tests faits sur plusieurs téléphones mobiles. En fonction des téléphones, les 4 onglets s'affichent à la suite comme sur ordinateurs de bureau, sur certains téléphones ils s'affichent sur deux lignes donc c'est un peu disgracieux.

Si on passe l'affichage des onglets en mode vertical (l'un au dessous l'autre) en version mobile c'est pas top.

Pour passer en mode affichage vertical en version mobile:

@media (max-width: 640px) {
    .tab button {
        float: none;
        display: block;
    }
}

Antoine a fait une CSS pour avoir des boutons/onglets dans le style du site web :

.tab button {
    background: linear-gradient(to bottom, rgb(242, 242, 242) 0%,rgb(255, 255, 255) 80%,rgb(229, 229, 229) 100%); background-color: rgba(0, 0, 0, 0);
    float: left;
    border: 1px solid rgb(242, 242, 242);
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: #2b5385;
    border-radius: 10px 10px 0 0;
    margin-right: 0.2rem;
        border: 1px solid #ddd;
}

.tab button.active {
    background: #005184;
    color: #fff;
}
.tabcontent {
    padding: 0px 12px;
}
.tab {
    overflow: hidden;
    border: 1px solid white;
    text-align: center;
    display: inline-block;
        box-shadow: inset 0px -10px 10px -8px #cfcfcf;
}

Antoine enverra la partie pour mobile, pour éviter que les boutons aillent à la ligne.

Version finale (enfin, pour le moment) de la CSS :

.tab button {
    background: linear-gradient(to bottom, rgb(242, 242, 242) 0%,rgb(255, 255, 255) 80%,rgb(229, 229, 229) 100%); background-color: rgba(0, 0, 0, 0);
    float: left;
    border: 1px solid rgb(242, 242, 242);
    outline: none;
    cursor: pointer;
    padding: 5px 14px 5px;
    transition: 0.3s;
    color: #2b5385;
    border-radius: 10px 10px 0 0;
    margin-right: 0.2rem;
    border: 1px solid #ddd;
}

.tab button.active {
    background: #005184;
    color: #fff;
}
.tabcontent {
    padding: 0px 12px;
}
.tab {
    overflow: hidden;
    border: 1px solid white;
    text-align: center;
    display: inline-block;
        box-shadow: inset 0px -10px 10px -8px #cfcfcf;
}

@media screen and (max-width: 450px) { 
    .tab button {
        padding: 10px 3px;
    }
}