Discussion :

[fleedalfire]

Bonjour,
Je n'arrive pas a faire que mon accordéon quand on click sur le bouton avril il affiche l'information qui est en dessous.
Je ne connais pas la propriété click qui pourrait être valable.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="tab-1" class="tab-content current">
     <button><h5 id="moisafficher1" style="text-align: center;"><strong>AVRIL 2018</strong></h5></button>
      <div id="moiscacher1">
          <p style="text-align: center;">PERFORMANCE HISTORIQUE</p>
          <img src="/wp-content/uploads/2018/11/performance_class_A_USD_04.18-historique-Fr_01.png"/>
          <p style="text-align: center;">PERFORMANCE HISTORIQUE</p>
          <img src="/wp-content/uploads/2018/11/performance_class_A_USD_04.18-historique-Fr_01.png"/>
          <p style="text-align: center; margin-top: 7px;">PART DE LIQUIDITÉS</p>
          <img class="aligncenter" src="/wp-content/uploads/2018/11/performance_class_A_USD_04.18-liquidite-Fr_01.png" width="330px" height="330px" style="margin-top: 10px; margin-bottom: 20px;">
          <p style="text-align: center;">SYNTHÈSE PAR EXPOSITION AUX DEVISES</p>
          <img class="aligncenter" src="/wp-content/uploads/2018/11/performance_class_A_USD_04.18-devise-Fr_01.png" width="330px" height="330px" style="margin-top: 10px; margin-bottom: 20px;">
          <p style="text-align: center;">SYNTHÈSE PAR EXPOSITION GÉOGRAPHIQUE</p>
          <img class="aligncenter" src="/wp-content/uploads/2018/11/performance_class_A_USD_04.18-geographique-Fr_01.png" width="330px" height="330px" style="margin-top: 10px; margin-bottom: 20px;">
          <p style="text-align: center;">NOTE DE PORTEFEUILLE</p>
          <img class="aligncenter" src="/wp-content/uploads/2018/11/performance_class_A_USD_04.18-portefeuille-Fr_01.png" width="330px" height="330px" style="margin-top: 10px; margin-bottom: 20px;">
          <button class="aligncenter bouton" >HISTORIQUE</button>
     </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
        $("[id^='moiscacher']").hide();
        $("[id^='moisafficher']").on('change', function(){
             menuid = $(this).attr('id').match(/\d+/)[0];
             if( $(this).is("click")){ 
                $("[id='moiscacher"+menuid+"']").show();
              }
             else{
             $("[id='moiscacher"+menuid+"']").hide();
             }
        });
    });

[Showie]

Bonjour,

Pour faire un bel accordéon je te propose ça : https://jqueryui.com/accordion/
ça marche très bien et très facilement.

Sinon je passe sur l'écriture de ton code très loin de toutes les bonnes pratiques pour un code propre. (EDIT: Je viens de voir que tu es en étude de Webmaster alors tu dois faire attention à l écriture de ton code un code bien écrit c'est beaucoup d'erreur en moins et des debugages facilité. Et si tu dois reprendre le code dans 2 ou 3 ans tu te remercieras d'avoir bien codé)

voici vite fait une correction : https://jsfiddle.net/f4gLc81w/

n'hésite pas à demander des explications si besoin.