Hidden Things Appear when click elemet - javascript, css
Question
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>
2 answers
solution1
0 2022-01-31 08:06:20
you can add this code in your javascript file as there is no function called getElementByClassName instead there is a function called getElementsByClassName which returns an array of elements since we have a single element i accessed it by [0]
document.getElementsByClassName("click")[0].addEventListener("click",
unhide);
function unhide(){
document.getElementsByClassName("panel-body")
[0].classList.toggle("hide");
}
solution2
-1 ACCPTED 2022-01-31 07:49:16
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hidden submenu appear on click javascript
how to make a hidden div appear on button click in Javascript
How to toggle multiple hidden fields to appear via CSS & Javascript?
When click element it appear elsewhere javascript/jquery
How to transition to “hidden” in javascript and css when toggling
Keep background when button is hidden? (CSS/Javascript)
increment 1 to the last elemet of array that is not 0 Javascript
How do I make my slideshow of Photos appear when the page opens, instead of when I click the dots, HTML CSS JavaScript?
find out elemet`s real height with js, when css height is set to 0
jquery and css hint needed $("elemet").css();
Related Tags