Show Hide Div Code = Messy

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
yakabod
Forum Newbie
Posts: 6
Joined: Tue Sep 18, 2007 4:24 pm

Show Hide Div Code = Messy

Post by yakabod »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I am not a coder at all, I just follow what the script directions say and try and go with the flow.  I tried creating it's own stylesheet, but for some reason it's not working for me. How can I improve this code?  Thanks!

[syntax="html"]<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
<style type="text/css">
#title {
color:#FFFFFF;
font-size:24px;
font-weight:bold;
text-decoration:underline;
}

.title2 {
color:#5C99D9;
font-size:18px;
}

.email {
color:#8FBAE4;
font-size:12px;
}

a{
color:#FFFFFF;
text-decoration:underline; 
}

a:hover{
text-decoration:none;
color: #; 
}

a:visited{
color:#FFFFFF;
}
.style1 {color: #5C99D9}
</style>

<div align="center">
	<br  />
		<div id="title"><b>Frequently Asked Questions</b>
  		</div><br />
			<div class="title2">General Questions
			</div>
				<span class="style1">+</span> <a href="#" onclick="toggle_visibility('q1');">What is Car Audio Clips?</a> <br />
				<div id="q1" style="display:none; color:#FFFFFF; border:1px solid #5C99D9; width:400px;" >
					Car Audio Clips is a video sharing site strictly for audio.  You may upload videos, share your videos, and interact with other members.  We are the 'Official' Car Audio video sharing site that offers video categories for popular brand names, including interesting categories such as:  Educational clips, Woofer Abuse clips, Competition clips, etc.  So much to offer for Car Audio Enthusiasts all for FREE! 
				</div>
				<span class="style1">+</span> <a href="#" onclick="toggle_visibility('q2');">Can I create my own profile?</a> <br />
				<div id="q2" style="display:none; color:#FFFFFF; border:1px solid #5C99D9; width:400px;" >
					Yes you may! After registration, login your account. Go to 'My Profile' and start uploading your photo, and filling in your Personal Information and Car Audio System Specs!  Hit 'submit' and voila! Let the world know what your running in that trunk! 
				</div>
				<span class="style1">+</span> <a href="#" onclick="toggle_visibility('q3');">How do I start uploading videos?</a> <br />
				<div id="q3" style="display:none; color:#FFFFFF; border:1px solid #5C99D9; width:400px;" >
					You can start uploading videos once you register on CarAudioClips.com.  <a href="http://www.caraudioclips.com/login.php">Click here to Register</a>
				</div>
				<span class="style1">+</span> <a href="#" onclick="toggle_visibility('q4');">Is Car Audio Clips really FREE?</a> <br />
				<div id="q4" style="display:none; color:#FFFFFF; border:1px solid #5C99D9; width:400px;" >
					Yes, in our BETA launch we are offering our services free. Our hope is to keep the service free. Please support Car Audio Clips and our advertisers, and click the ads you see on the site.
				</div>
					<br />
					<br />
			<div class="title2">Videos Related
			</div>
				<span class="style1">+</span> <a href="#" onclick="toggle_visibility('v1');">I used the YouTube Grabber, everything went well, but the video does not load and I cannot see the thumbnail picture.  Is there a solution?</a> <br />
				<div id="v1" style="display:none; color:#FFFFFF; border:1px solid #5C99D9; width:400px;" >
					Usually this works instantly, but since this script is still in the beta stages, it has a couple of bugs.  The solution is to delete that broken video and go through the YouTube Grabber process one more time.  The second time should work.  If not, please contact us at support (at) caraudioclips (dot) com.
				</div>
				<span class="style1">+</span> <a href="#" onclick="toggle_visibility('v1');">I am getting an error when selecting a video from my computer.</a>
				<div id="v1" style="display:none; color:#FFFFFF; border:1px solid #5C99D9; width:400px;" >
					Usually this works instantly, but since this script is still in the beta stages, it has a couple of bugs.  The solution is to delete that broken video and go through the YouTube Grabber process one more time.  The second time should work.  If not, please contact us at support (at) caraudioclips (dot) com.
				</div>
					<br />
					<br />
			<div class="title2">Technical Support
			</div>
				<span class="style1">+</span> <a href="#" onclick="toggle_visibility('s1');">I registered, but did not receive email confirmation?!?!</a>
				<div id="s1" style="display:none; color:#FFFFFF; border:1px solid #5C99D9; width:400px;" >
					1. Check your SPAM folder.<br />
					2. Your account will be manually activated by us within 24 hours.
				</div>
				<br />
				<br />
	<div class="email">Still have a question?  Feel free to email us anytime at support (at) caraudioclips (dot) com</div>
</div>

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

with jQuery for behaviours and pure CSS for style!

It's all about separation.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Kieran Huggins wrote:with jQuery for behaviours and pure CSS for style!

It's all about separation.
Absolutely, to that.

With jQuery, it's as easy as ${'element'}.hide(); and ${'element'}.show();.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

or you can do a little $('element').toggle() action...
Post Reply