Onclick event faire pop un texte

Yo,
je suis débutant en java script et pour être franc j'apprends dans le tas quoi. J'me sers de w3, pierre giraud etc mais bon c'est pas une aide direct ^^.

J'explique :
j'ai pris une icon sur FontA' et je l'ai placé dans une div pensant que c'était le meilleur a faire, mais il semble que JS prends pas en compte l'event de la classe.

Voilà comment j'ai procédé :

                        <div class="circle"><i class="fa fa-plus-circle" aria-hidden="true"></i></div>

.circle{
    margin-top: 5%;
    margin-left: 50%;
    margin-bottom: 5%;
    padding: 0;

}

j'ai mis ma class i comme ça, donc l'icon s'affiche bien et le résultat se présente comme ça :



maintenant j'aimerais qu'on m'explique comment je peux faire apparaître un texte en dessous du bouton qui apparaît et disparaît quand on appui sur le bouton?

je suis pas sur de quelle classe je suis censé récupérer déjà, et j'ai pas d'idée par où commencer. J'ai quelques heures de visionnages de tutoriel mais ça apprends pas a utiliser dans le tas comme ça (fin pour mon cas, j'ai du mal ^^)

J'ai essayé comme ça en js mais ça fonctionne pas :

document.getElementsByClassName("circle").onclick = function() {showtext()};

function showtext(){
    document.getElementsByClassName("circle").innerHTML = "test";
}

Merci
Modifié par Efeelios (22 Nov 2019 - 16:19)

Bonjour Efeelios,
Quelque exemples :
https://codepen.io/Zonecss/pen/RwwOJwd

Salut, merci l'ami mais tu peux m'expliquer comment ça fonctionne histoire que je sois capable de le refaire par moi même plus tard? Surtout que je comprends pas tout ^^

Bonjour Efeelios,
J'ai commenté le css et le Javascript, j'espère que cela sera plus clair

Super ça fonctionne.
Merci beaucoup l'ami. Peux-tu laisser le lien? je m'en servirais beaucoup.

ty !

edit : tu sais comment je pourrais le rendre en alert a l'appui du bouton? parce que ça déforme tout mon site, en l’occurrence les images qui entourent le texte, le background sont tirés et ça rends vraiment moche^^ (ou faire en sorte de retirer cet effet d’étirement quand le texte pop?

edit²: j'ai essayer de mettre plusieurs bouton sur ma page. J'ai réussi mais le résultat .. :
https://www.noelshack.com/2019-47-7-1574563160-capture.jpg

pourquoi ça fait ça ?
voilà mon code:

                    <script src="javascript/bleach.js"></script>

                    <div class="bleachdiv">
                        <a href="#"><img class="bleach" src="https://m.media-amazon.com/images/M/MV5BZjE0YjVjODQtZGY2NS00MDcyLThhMDAtZGQwMTZiOWNmNjRiXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_.jpg" alt="bleach"></a>
                        <p>Bleach</p>
                        <div class="circle" id="textB">
                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                <div class="bleachtext">

                                    Lblablabla

                            </div>
                        </div>
                    </div>

mon css:

.bleachdiv p{
    text-align: center;
    color: #fff;
    font-family: 'Poppins';
    font-size: 20px;
}

.bleach{
    display: inline-block;
    vertical-align: top;
    height: 85%;
    width: 200px;
    margin: 0 20px 5px;
    padding: 0;
}

.circle .bleachtext{
    display: none;
}

.circle .fa-minus-circle + .bleachtext{
    display : block;
    
}

et mon js:

function showtext(oEvent){

    if(this.classList.contains("fa-plus-circle")){
      this.classList.replace("fa-plus-circle","fa-minus-circle");
    }else{
      this.classList.replace("fa-minus-circle","fa-plus-circle");
    }
  }//fct
  
  document.addEventListener('DOMContentLoaded',function(){

    let oExemple =  document.getElementById("textB"),

        aCircle = oExemple.getElementsByClassName("fa");

    for(let oBt of aCircle){
      oBt.addEventListener('click',showtext);
    }})//for

Modifié par Efeelios (24 Nov 2019 - 03:41)