Div Visibility Toggling |
Div Visibility Toggling |
Coler234 |
Aug 21 2015, 12:03 PM
Post
#1
|
Group: Members Posts: 1 Joined: 21-August 15 Member No.: 23,391 |
Hey, I'm working on having a list of clients, and you can toggle the description by clicking on it. It will toggle the visibility of the description. I'm having issues actually having the javascript run. Currently:
CODE <body onload="code()"> is working, but I'm trying to have the description disabled by default. But, it's not working.Here is my actual site, I will still post the code below. My Webpage. HTML: CODE <html> <script src="Javascript.js" type="text/javascript"></script> <script src="jquery-2.1.4.js"></script> <head> <link href="Styles.css" rel="stylesheet" type="text/css"> </head> <body onload="code()"> <div id="TitleBar"> <h1>Enforcer's Minecraft Coding Database</h1> <h3 class="type">Hacked Clients</h3> <h3 class="type">Bukkit Plugins</h3> </div> <div id="ClientBar"> <h1>Hacked Clients</h1> <!-- Enforcer --> <a href="#" class="ButtonOne"><h4>Enforcer</h4></a> <p class="ContentOne">HAHAHAHAHAHHA</p> <!-- /Enforcer --> </div> <div id="PluginsBar"> <h1>Bukkit Plugins</h1> </div> </body> </html> CSS: CODE @font-face{ font-famiy: "Trench"; src: url('Trench.otf'); } #TitleBar{ background-color: #12EDED; width: 100%; height: 30%; border: 1px solid black; color: white; font-family: "Comic Sans MS", cursive, sans-serif; text-align: center; } .type{ text-align: center; display: inline; margin: 5%; color: #333777; } #ClientBar{ background-color: #D926BE; width: 100%; height: 30%; border: 1px solid black; color: white; text-align: center; } .Enforcer{ text-align: center; color: #333777; font-family: "Trench", sans-serif; } Javascript CODE function code(){ $(".ButtonOne").click(function(){ $(".ContentOne").toggle(); }); } window.onload = start(); function start(){ alert("start"); $(".ContentOne").toggle(); } |
Christian J |
Aug 21 2015, 05:03 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I don't use jQuery, but try the hide() method to hide the element when the page is loaded. Also you may not be able to use both this onload event:
CODE <body onload="code()"> and this one: CODE window.onload = start(); together without conflicts. Try something like this instead: CODE $(document).ready(function() { $(".ContentOne").hide(); $(".ButtonOne").click(function(){ $(".ContentOne").toggle(); }); }); See also http://api.jquery.com/ready/ |
Lo-Fi Version | Time is now: 23rd April 2024 - 01:10 AM |