Hidden Things Appear when click elemet – javascript, css

January 31, 2022

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 class="nav">
      <div id="pagetitle">Command List</div>
    </div>
    <div class="heading">
      <div class="click">
        <div>
          <h6 class="cmlistname">?help</h6>
          <p class="inline"> -content</p>
        </div>
      </div>
      <div class="panel-body panel-body-rtl hide">
        <h3 class="helpcommandHead">Usage:</h3>
        <p class="helpcommandContent">#moveme [channel or user]</p>
        <p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
          #moveme @Dramex</p>
      </div>
    </div>

  </body>
</html>

>Solution :

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 class="nav">
      <div id="pagetitle">Command List</div>
    </div>
    <div class="heading">
      <div class="click">
        <div>
          <h6 class="cmlistname">?help</h6>
          <p class="inline"> -content</p>
        </div>
      </div>
      <div class="panel-body panel-body-rtl hide">
        <h3 class="helpcommandHead">Usage:</h3>
        <p class="helpcommandContent">#moveme [channel or user]</p>
        <p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
          #moveme @Dramex</p>
      </div>
    </div>



</body>
</html>