Jump to content

Show Hide Div Problem


yakabod

Recommended Posts

Here is my FAQ: http://www.caraudioclips.com/support.php

This is the script I am using:  http://www.linkstraffic.net/programming/javascript/showhide.php

 

How do I make this script simple and user friendly?  For every question I create I need a new code to add on the css?  My code looks so messy that I think there is an error on IE but works fine on firefox and opera :(

 

<script type="text/javascript">
<!--
function ShowHide(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.visibility == 'visible'){
obj[id].style.visibility = 'hidden';
obj[id].style.height = '0px';
}
else {
obj[id].style.visibility = 'visible';
obj[id].style.height = 'auto';
}
}
//-->
</script>
<!-- Set the box as invisible at first -->
<style type="text/css">
#lay {
visibility:hidden;
color: #FFFFFF;
width:400px;
height:0px;
border:1px solid #5C99D9
}
#lay2 {
visibility:hidden;
color: #FFFFFF;
width:400px;
height:0px;
border:1px solid #5C99D9
}
#title {
color:#FFFFFF;
font-size:24px;
font-weight:bold;
text-decoration:underline;
}

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

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 id="title2">General Questions</div>
				<span class="style1">+</span> <a href="javascript:ShowHide('lay')">How do I start uploading videos?</a><br />
					<div id="lay" align="center">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="javascript:ShowHide('lay2')">Is it really free?</a><br />
					<div id="lay2" align="center"> 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>
</div>

Link to comment
Share on other sites

Rather than give each answer a unquie id with the same css. Instead give each answer the same class name, eg: class="answer", you then setup a class in your css you want your awsers to be styled as.

 

Then assign a unquie id to each answer (do not apply any styling for this id in your css). That way you don't have duplicate the css for the answers.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.