Hidden Things Appear when click elemet - javascript, css-CodePudding

I have a problem on learning the web. When I click on the text, the hidden element be appear. But there are several texts. I used Javascript getElementsByClassName and it doesn't work. i am doing web like probot.io (discord bot web commands) i am not good at javascript :( What should I do? pls Help me (T_T)

// ??

@import url('https://fonts.googleapis.com/css2?family=Amatic SC:wght@700&family=IBM Plex Sans Thai Looped:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@700&family=Roboto:ital,wght@1,700&display=swap');

body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}

.nav {
  background-color: black;
  padding: 7px;
  font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}

.heading {
  /* text-align: center; */
  background-color: #202225;
  color: white;
  margin: 30px;
  margin-left: 30%;
  margin-right: 30%;
  padding: 20px;
  border-left: 4px solid red;
}
.click,
a {
    cursor: pointer
}
.cmlistname {
  display: inline;
  font-family: 'Heebo', sans-serif;
  font-size: 24px;
}
.inline {
  display: inline;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
}

.rtl .panel-body-rtl {
  direction: rtl;
  text-align: right;
}
.helpcommandHead {
  color: #ccc;
  font-weight: 700;
  font-size: 15px
}
.helpcommandContent {
  font-family: 'Roboto', sans-serif;
  margin-left: 15px;
  white-space: pre
}
.hide {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Command Lists</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="css\commandlist.css">
    <script src="js\commandscripts.js"></script>
  </head>
  <body>
    <div >
      <div id="pagetitle">Command List</div>
    </div>
    <div >
      <div >
        <div>
          <h6 >?help</h6>
          <p > -content</p>
        </div>
      </div>
      <div >
        <h3 >Usage:</h3>
        <p >#moveme [channel or user]</p>
        <p >예시:</p><p >#moveme general
          #moveme @Dramex</p>
      </div>
    </div>

  </body>
</html>

CodePudding user response：

you can add this code in your javascript file as the function called getElementsByClassName returns an array of elements and since we have a single element with class "click", i accessed it by [0] .

document.getElementsByClassName("click")[0].addEventListener("click", 
unhide);

function  unhide(){
document.getElementsByClassName("panel-body") 
[0].classList.toggle("hide");
}

CodePudding user response：

maybe like this you want. i add class on "click" event. & using css i show hidden content.

        jQuery(document).ready(function($) {
            jQuery('.click').click(function(event) {
                jQuery('.panel-body').toggleClass('show-content');
            }); 
        });

body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}

.nav {
  background-color: black;
  padding: 7px;
  font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}

.heading {
  /* text-align: center; */
  background-color: #202225;
  color: white;
  margin: 30px;
  margin-left: 30%;
  margin-right: 30%;
  padding: 20px;
  border-left: 4px solid red;
}
.click,
a {
    cursor: pointer
}
.cmlistname {
  display: inline;
  font-family: 'Heebo', sans-serif;
  font-size: 24px;
}
.inline {
  display: inline;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
}

.rtl .panel-body-rtl {
  direction: rtl;
  text-align: right;
}
.helpcommandHead {
  color: #ccc;
  font-weight: 700;
  font-size: 15px
}
.helpcommandContent {
  font-family: 'Roboto', sans-serif;
  margin-left: 15px;
  white-space: pre
}
.hide {
  display: none;

}
.panel-body.show-content {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>


    

    <div >
      <div id="pagetitle">Command List</div>
    </div>
    <div >
      <div >
        <div>
          <h6 >?help</h6>
          <p > -content</p>
        </div>
      </div>
      <div >
        <h3 >Usage:</h3>
        <p >#moveme [channel or user]</p>
        <p >예시:</p><p >#moveme general
          #moveme @Dramex</p>
      </div>
    </div>



</body>
</html>