如何隐藏信息，仅在单击按钮html，css时显示。 JavaScript的？

Question

I want to know how to hide the information for terms (button) and enumeration (Button). The information should only appear when a button is clicked or chosen. Hope for good answers. Thank you!! If you have suggestion to my html and css that will make that show and hide easily made.

 @charset "utf-8"; body { width: 960px; overflow-x: hidden; } }html, body { height: 100%; } body { margin: 0px; padding: 0px; background: #ffffff; font-family: 'Raleway', sans-serif; font-size: 11pt; font-weight: 400; color: #363636; } a{text-decoration:none} .wrapper{ text-align: center; width: 100%; position: absolute; } .header{ background-color: #ffffff; } .header img { width: 360px; } #nav { background-color: black; width: 100%; font-size: 1em; border-top-width: medium; border-top-style: groove; border-bottom-style: groove; border-bottom-width: medium; } #nav a{ letter-spacing: 1px;} #nav ul { list-style: none; display: block; font-size: larger; } #nav ul li { display: inline-block; } #nav ul { text-align: center; } #nav ul li a { color: #ffffff; text-decoration: none; display: block; padding-top: 10px; padding-right: 15px; padding-left: 15px; padding-bottom: 10px; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; text-transform: uppercase; position: relative; } #nav ul li a:hover { color: #fff; } #cssmenu ul li a:hover:before { width: 100%; } #nav ul li a.active { text-decoration:underline; color: #EDF0BA; } div.navigation li { list-style: none; } div.navigation li:hover { background: #555; } div.navigation li:hover ul { display: block; } .how, .about{ font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; margin-left: 10%; margin-right: 10%; background-color: white; text-align: left; color: black; } .sectiontitle{ text-align: center; color: black; text-shadow: 1px 1px 2px #767676; } .footer{ background-color: black; width: 100%; border-style: groove hidden hidden; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding-top: 1%; padding-bottom: 1%; font-size: 1em; color: #FFFFFF; font-variant: small-caps; vertical-align: middle; } .addnotes { float: left; padding-left: 2%; font-color: black; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .glyphicon-trash:before { content: "\\e020"; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn-sm, { padding: 5px 10px; font-size: 12px; line-height: 1px; border-radius: 3px; } .btn-default{color:#333;background-color:#fff;border-color:#ccc} .listnotes { margin: 0; padding: 0; list-style-type: none; } .listnotes li { background: url('noteicon.png') no-repeat; width: 220px; height: 135px; margin-left: 45%; padding-top: 5%; margin-bottom: 10px; } .noteTitle { float: left; left: 0%; left: 0%; color: black; } .buttons{ margin-top: 100px; color: black; } .createcontent { float: right; padding-right: 25%; width: 50%; margin: 0 auto; } .definition { padding-top: 10%; } .enumeration { padding-top: 15%; } #titletextbox { background: transparent; border: none; width: 100%; } @media screen and (max-width:320px){ .wrapper{ width: 320px; } #nav { background-color: black; width: 100%; font-size: 10px; border-top-width: thin; border-top-style: thin; border-bottom-style: thin; border-bottom-width: thin; } #logo{ margin-top: 5px; width: 50%; } .footer{ background-color: black; width: 100%; border-style: groove hidden hidden; padding-bottom: 1%; color: #FFFFFF; font-variant: small-caps; vertical-align: middle; } .listnotes li { background: url('noteicon.png') no-repeat; width: 100; height: 100; margin-left: 35%; padding-top: 5%; margin-bottom: 10px; } .createcontent{ font-size: 14px; } .listnotes{ font-size: 14px; } a{text-decoration:none} } @font-face { font-family:'Glyphicons Halflings'; src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype),url(../fonts/glyphicons-halflings-regular.woff2) format(woff2),url(../fonts/glyphicons-halflings-regular.woff) format(woff),url(../fonts/glyphicons-halflings-regular.ttf) format(truetype),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg); } .glyphicon { position:relative; top:1px; display:inline-block; font-family:'Glyphicons Halflings'; font-style:normal; font-weight:400; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .glyphicon-plus:before { content:"\\2b"; } .glyphicon-remove:before { content:"\\e014"; } .glyphicon-trash:before { content:"\\e020"; } .glyphicon-floppy-save:before { content:"\\e175"; } .btn { display:inline-block; margin-bottom:0; font-size:14px; font-weight:400; line-height:1.42857143; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-image:none; border:1px solid transparent; border-radius:3px; padding:6px 12px; } .btn.focus,.btn:focus,.btn:hover { color:#333; text-decoration:none; } .btn.active,.btn:active { background-image:none; outline:0; -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125); box-shadow:inset 0 3px 5px rgba(0,0,0,.125); } .btn-default { margin-top: 10px; color:#333; background-color:#fff; border-color:#ccc; } .btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default { color:#333; background-color:#e6e6e6; border-color:#adadad; } .btn-primary { color:#fff; margin-left: -50px; background-color:#337ab7; border-color:#2e6da4; margin-top: 10px; } .btn-primary1 { color:#fff; margin-left: -10px; background-color:#337ab7; border-color:#2e6da4; margin-top: 10px; margin-left:20px; } .form-control { width:100%; height:20px; font-size:14px; line-height:1.42857143; color:#555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075); box-shadow:inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; padding:6px 12px; } .col-sm-2 { width:20%; float: left; font-size: 20px; margin-top: 20px; } .col-sm-10 { width:80%; float: left; margin-top: 20px; } .DemoBS2{ margin-top: 110px; margin-left: 40px; display:block; margin-bottom:0; font-size:14px; text-align:left; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-image:none; border:1px solid transparent; border-radius:3px; padding:6px 12px; } p{ background:#444; color:#4ee255; padding:10px; margin:10px 0px; border:2px solid #fa4b2a; border-radius:10px; box-shadow:4px 4px 4px #ccc; } } 

 <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="logo.png"> <title>Create notes</title> <link href="css/style1.css" rel="stylesheet" type="text/css"> <link href="css/style3.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div class="header" id="header"> <div class="logo"> <img src = "logo.png" alt = "logo" name = "logo" id = "logo"> </div> </div> <div class="navigation" id="nav"> <ul> <li><a href="index.html"><span>Home</span></a></li> <li><a href="notes.html" class='active'><span>Notes</span></a></li> <li><a href="exam.html"><span>Exams</span></a></li> </ul> </div> <div class="noteTitle"> <label class="control-label col-sm-2" for="email">Title:</label> <div class="col-sm-10"> <input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title."> </div> <a href="#" class="btn btn-sm btn-primary" onclick="saveAndClose()"><span class="glyphicon glyphicon-floppy-save"></span> Save and close</a> </div> <div class="DemoBS2"> <!-- Toogle Buttons --> <button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#toggle-example">Terms</button> <button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#toggle-example">Enumerations</button> <div id="toggle-example" class="collapse in"> <p>I don't know how to hide this. This should only show</b> when the button is clicked in terms(button)</b>Please help thanks.</p></div> </div> </div> </body> <script type="text/javascript" src="Scripts/createscript.js"></script> </html> 

Answer 1

Firstly you need to hide in css as:

#toggle-example p{display:none;}

and in jquery on click on Terms button, you need to toggle as:

$('#toggle-example p').toggle();

Answer 2

 $(".btn1").click(function() { $("#toggle-example").fadeToggle(); }) 

 @charset "utf-8"; body { width: 960px; overflow-x: hidden; } } html, body { height: 100%; } #toggle-example { display: none } body { margin: 0px; padding: 0px; background: #ffffff; font-family: 'Raleway', sans-serif; font-size: 11pt; font-weight: 400; color: #363636; } a { text-decoration: none } .wrapper { text-align: center; width: 100%; position: absolute; } .header { background-color: #ffffff; } .header img { width: 360px; } #nav { background-color: black; width: 100%; font-size: 1em; border-top-width: medium; border-top-style: groove; border-bottom-style: groove; border-bottom-width: medium; } #nav a { letter-spacing: 1px; } #nav ul { list-style: none; display: block; font-size: larger; } #nav ul li { display: inline-block; } #nav ul { text-align: center; } #nav ul li a { color: #ffffff; text-decoration: none; display: block; padding-top: 10px; padding-right: 15px; padding-left: 15px; padding-bottom: 10px; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; text-transform: uppercase; position: relative; } #nav ul li a:hover { color: #fff; } #cssmenu ul li a:hover:before { width: 100%; } #nav ul li a.active { text-decoration: underline; color: #EDF0BA; } div.navigation li { list-style: none; } div.navigation li:hover { background: #555; } div.navigation li:hover ul { display: block; } .how, .about { font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; margin-left: 10%; margin-right: 10%; background-color: white; text-align: left; color: black; } .sectiontitle { text-align: center; color: black; text-shadow: 1px 1px 2px #767676; } .footer { background-color: black; width: 100%; border-style: groove hidden hidden; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding-top: 1%; padding-bottom: 1%; font-size: 1em; color: #FFFFFF; font-variant: small-caps; vertical-align: middle; } .addnotes { float: left; padding-left: 2%; font-color: black; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .glyphicon-trash:before { content: "\\e020"; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; } .btn-sm, { padding: 5px 10px; font-size: 12px; line-height: 1px; border-radius: 3px; } .btn-default { color: #333; background-color: #fff; border-color: #ccc } .listnotes { margin: 0; padding: 0; list-style-type: none; } .listnotes li { background: url('noteicon.png') no-repeat; width: 220px; height: 135px; margin-left: 45%; padding-top: 5%; margin-bottom: 10px; } .noteTitle { float: left; left: 0%; left: 0%; color: black; } .buttons { margin-top: 100px; color: black; } .createcontent { float: right; padding-right: 25%; width: 50%; margin: 0 auto; } .definition { padding-top: 10%; } .enumeration { padding-top: 15%; } #titletextbox { background: transparent; border: none; width: 100%; } @media screen and (max-width: 320px) { .wrapper { width: 320px; } #nav { background-color: black; width: 100%; font-size: 10px; border-top-width: thin; border-top-style: thin; border-bottom-style: thin; border-bottom-width: thin; } #logo { margin-top: 5px; width: 50%; } .footer { background-color: black; width: 100%; border-style: groove hidden hidden; padding-bottom: 1%; color: #FFFFFF; font-variant: small-caps; vertical-align: middle; } .listnotes li { background: url('noteicon.png') no-repeat; width: 100; height: 100; margin-left: 35%; padding-top: 5%; margin-bottom: 10px; } .createcontent { font-size: 14px; } .listnotes { font-size: 14px; } a { text-decoration: none } } @font-face { font-family:'Glyphicons Halflings'; src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype), url(../fonts/glyphicons-halflings-regular.woff2) format(woff2), url(../fonts/glyphicons-halflings-regular.woff) format(woff), url(../fonts/glyphicons-halflings-regular.ttf) format(truetype), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg); } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .glyphicon-plus:before { content: "\\2b"; } .glyphicon-remove:before { content: "\\e014"; } .glyphicon-trash:before { content: "\\e020"; } .glyphicon-floppy-save:before { content: "\\e175"; } .btn { display: inline-block; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 3px; padding: 6px 12px; } .btn.focus, .btn:focus, .btn:hover { color: #333; text-decoration: none; } .btn.active, .btn:active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn-default { margin-top: 10px; color: #333; background-color: #fff; border-color: #ccc; } .btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-primary { color: #fff; margin-left: -50px; background-color: #337ab7; border-color: #2e6da4; margin-top: 10px; } .btn-primary1 { color: #fff; margin-left: -10px; background-color: #337ab7; border-color: #2e6da4; margin-top: 10px; margin-left: 20px; } .form-control { width: 100%; height: 20px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; padding: 6px 12px; } .col-sm-2 { width: 20%; float: left; font-size: 20px; margin-top: 20px; } .col-sm-10 { width: 80%; float: left; margin-top: 20px; } .DemoBS2 { margin-top: 110px; margin-left: 40px; display: block; margin-bottom: 0; font-size: 14px; text-align: left; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 3px; padding: 6px 12px; } p { background: #444; color: #4ee255; padding: 10px; margin: 10px 0px; border: 2px solid #fa4b2a; border-radius: 10px; box-shadow: 4px 4px 4px #ccc; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="logo.png"> <title>Create notes</title> <link href="css/style1.css" rel="stylesheet" type="text/css"> <link href="css/style3.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div class="header" id="header"> <div class="logo"> <img src="logo.png" alt="logo" name="logo" id="logo"> </div> </div> <div class="navigation" id="nav"> <ul> <li><a href="index.html"><span>Home</span></a> </li> <li><a href="notes.html" class='active'><span>Notes</span></a> </li> <li><a href="exam.html"><span>Exams</span></a> </li> </ul> </div> <div class="noteTitle"> <label class="control-label col-sm-2" for="email">Title:</label> <div class="col-sm-10"> <input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title."> </div> <a href="#" class="btn btn-sm btn-primary" onclick="saveAndClose()"><span class="glyphicon glyphicon-floppy-save"></span> Save and close</a> </div> <div class="DemoBS2"> <!-- Toogle Buttons --> <button type="button" class="btn btn-warning btn1" data-toggle="collapse" data-target="#toggle-example">Terms</button> <button type="button" class="btn btn-warning btn2" data-toggle="collapse" data-target="#toggle-example">Enumerations</button> <div id="toggle-example" class="collapse in"> <p>I don't know how to hide this. This should only show</b> when the button is clicked in terms(button)</b>Please help thanks.</p> </div> </div> </div> </body> <script type="text/javascript" src="Scripts/createscript.js"></script> </html>