I am currently trying to create a FAQ webpage.
At the moment the code I have lets me click on the Questions which
successfully shows and hides the <DIV> tags containing the Answers.
But what I would like is to have the answers also collapse and
expland, similar to the small plus and minus signs in Window Explorer.
I'm sure it can be done using the CSS rules display: block; and
display: none
but I'm not sure how to implement it with my current Javascript.
This is the code I am trying to use:
Expand|Select|Wrap|Line Numbers
- <script language = "JavaScript 2.1"
- type = "text/javascript">
- <!--
- function hideLayer(layerid)
- {
- var layer = new Object();
- layer = document.getElementById(layerid);
- var visible = layer.style.visibility != "hidden"
- if(visible){
- layer.style.visibility = "hidden";
- }else{
- layer.style.visibility = "visible";
- }
- }//end hideLayer
- function hideLayer2(layerid)
- {
- var layer = new Object();
- layer = document.getElementById(layerid);
- var visible = layer.style.visibility != "hidden"
- if(visible){
- layer.style.visibility = "hidden";
- }else{
- layer.style.visibility = "visible";
- }
- }//end hideLayer
- // -->
- </script>
- <title>Untitled Document</title>
- </head>
- <body>
- <div id="answer1bg"
- style="position:absolute;
- left:311px;
- top:146px;
- width:472px;
- height:143px;
- z-index:1;
- background-color: #004A80;
- visibility:visible"></div>
- <div id="answer1text"
- style="position:absolute;
- font-family:Arial, Helvetica, sans-serif;
- font-size:14pt;
- left:325px;
- top:152px;
- width:452px;
- height:46px;
- z-index:2;
- visibility:visible;
- color: #FFFFFF">The is a charitable organization mainly funded
- by .
- This enables to have one full time member of staff (Manager).
- Project funding has been secured to employ additional paid staff for
- specialist services e.g. </div>
- <div id="topbg"
- style="position:absolute;
- left:311px;
- top:115px;
- width:472px;
- height:46px;
- z-index:2;
- visibility:visible"><img src="images/new/
- top.gif" /></div>
- <div id="question1"
- style="position:absolute;
- font-family:Arial, Helvetica, sans-serif;
- font-size:14pt;
- font-weight:400;
- left:449px;
- top:126px;
- width:140px;
- height:24px;
- z-index:2;
- color: #004A80;
- visibility:visible">
- <a href="#"
- onClick="hideLayer('answer1text');hideLayer('answer1bg');">How Is
- Funded?</a></div>
- <div id="answer2bg"
- style="position:absolute;
- left:311px;
- top:317px;
- width:472px;
- height:143px;
- z-index:1;
- background-color: #004A80;
- visibility:visible"></div>
- <div id="answer2text"
- style="position:absolute;
- font-family:Arial, Helvetica, sans-serif;
- font-size:14pt;
- left:325px;
- top:326px;
- width:452px;
- height:46px;
- z-index:2;
- visibility:visible;
- color: #FFFFFF">The is an independent organisation committed to
- providing advice on a wide range of subjects to people, irrespective
- of their status.</div>
- <div id="topbg2"
- style="position:absolute;
- left:311px;
- top:289px;
- width:472px;
- height:28px;
- z-index:2;
- visibility:visible"><img src="images/new/
- newtop.gif" /></div>
- <div id="question2"
- style="position:absolute;
- font-family:Arial, Helvetica, sans-serif;
- font-size:14pt;
- font-weight:400;
- left:449px;
- top:296px;
- width:196px;
- height:24px;
- z-index:2;
- color: #004A80;
- visibility:visible">
- <a href="#"
- onClick="hideLayer('answer2text');hideLayer('answer2bg');">What is
- all about?</a></div>
- </body>
Any help would be welcome!