HTML teksten laten uitvouwen:

Status
Niet open voor verdere reacties.

marrehemken

Nieuwe gebruiker
Lid geworden
20 okt 2015
Berichten
1
Wie oh wie schiet mij te hulp?

Ik wil op mijn website een pagina bouwen met meest gestelde vragen. Het gaat hier om 13 vragen. Hiervan wil ik het antwoord laten verschijnen als men op de vraag klikt.
Ik heb al tientalle codes geprobeerd, waarvan een aantal werken..
Alleen zijn deze codes altijd gebouwd tot 4 functies. Zodra ik een extra vraag wil maken, functioneert de code dus niet meer.


bijv. code
HTML:
<script type="text/javascript">
var onthouden="aan" 		// actuele status bijhouden met sessie-cookie (aan/uit)
var vorige_verbergen="ja"   // bij nieuw item vorige geopende item dichtvouwen(ja/nee)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.wisselen{display:none;}')
document.write('</style>')}

function getElementbyClass(classname){
ophalen=new Array()
var teller=0
var alleTags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alleTags.length; i++){
if (alleTags[i].className==classname)
ophalen[teller++]=alleTags[i]}}

function dichtvouwen(omit){
var teller=0
while (ophalen[teller]){
if (ophalen[teller].id!=omit)
ophalen[teller].style.display="none"
teller++}}

function uitvouwen(cid){
if (typeof ophalen!="undefined"){
if (vorige_verbergen=="ja")
dichtvouwen(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"}}

function vernieuwen(){
dichtvouwen("alles")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))}}
return returnvalue;}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem}
else return ""}

function status_opslaan(){
var teller=0, selectedItem=""
while (ophalen[teller]){
if (ophalen[teller].style.display=="block")
selectedItem+=ophalen[teller].id+"|"
teller++}
document.cookie=window.location.pathname+"="+selectedItem}

function do_onload(){
getElementbyClass("wisselen")
if (onthouden=="aan" && typeof ophalen!="undefined")
vernieuwen()}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (onthouden=="aan" && document.getElementById)
window.onunload=status_opslaan

</script>

SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 
<!
--
function showHide(id) { 
var elm = document.getElementById(id); 
elm.style.display = (elm.style.display=='
none'?'block':'none'); 
} 
//
--
> 
</SCRIPT>

Css code:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sample Page</title> </head> <body>
<h3>Sample Page</h3>

1 <a onclick='help_click(help1, "Additional text for title 1")'>?</a> Title 1 <div id="help1"></div>
2 <a onclick='help_click(help2, "Additional text for title 2")'>?</a> Title 2 <div id="help2"></div>




<br>
<br>
Veel gestelde vragen zijn hieronder per onderwerp behandeld:<br>
<br>
<FONT SIZE=“8” COLOR="#">1. Specificaties</FONT></b>
<br><br>
<b><FONT SIZE=“16” COLOR="#"><p onClick="uitvouwen('sc1')" style="cursor:hand;"> 1.1 Welke talen kan de Scanmarker scannen en vertalen?</p></FONT></b><br>
<div id="sc1" class="wisselen">
<FONT SIZE=“9” COLOR=“#”>
De scanmarker ondersteunt 44 verschillende talen. Wanneer een extra taal vereist is, gelieve een e-mail te sturen met dit verzoek naar info@website.nl.

<TABLE CELLSPACING=“20” CELLPADDING=“20" BORDER=“20"> <TR><TD WIDTH="15"></TD> <TD WIDTH="270" VALIGN="top">
•	Nederlands<br>
•	Estonian	<br>
•	Italiaans	<br>
•	Portugees(Portugal)	<br>
•	Turks<br>
•	Engels	<br>
•	Fins	<br>
•	Japanse	<br>
•	Portugees (Brazilië)	<br>
•	Oekraïens<br>
•	Spaans	<br>
•	Oostenrijks	<br>
•	Koreaans	<br>
•	Roemeens	<br>
•	Welsh<br></TD>  
<TD WIDTH="15"></TD> <TD WIDTH="270" VALIGN="top"> 
•	Duits	<br>
•	Kroatisch	<br>
•	Latijns	<br>
•	Russisch	<br>
•	Jiddisch<br>
•	Frans	<br>
•	Galicische<br>
•	Lets	<br>
•	Servisch	<br>
•	Chinees (vereenvoudigd)	<br>
•	Bulgaars	<br>
•	Litouws	<br>
•	Slowaaks	<br> 
•	Chinees (traditionele)	<br>
•	Grieks	<br></TD> 
<TD WIDTH="15"></TD> <TD WIDTH="270" VALIGN="top"> 
•	Sloveens	<br>
•	Tsjechisch<br>
•	Hebreeuws<br>	
•	Moldavisch<br>	 
•	Zoeloe	<br>
•	Deens	<br>
•	Hongaars	<br>
•	Noors	<br>
•	Zweeds	<br>
•	Esperanto	<br>
•	IJslands	<br>
•	Pools	<br>
•	Zwitserduits<br>
</TR> </TABLE></div>


<p onClick="uitvouwen('sc2')" style="cursor:hand;">1.2 Wat is de maximale lettergrootte dat kan worden gescand?</p>
<div id="sc2" class="wisselen">
Het gezichtsveld van de Scanmarker is 10 mm. Hiermee kan een maximale lettergrootte van 24 of 26 punten worden gescand.
</div>
<br>

<p onClick="uitvouwen('sc3’)” style="cursor:hand;">1.3 Wat is de maximale lettergrootte dat kan worden gescand?</p>
<div id="sc3” class="wisselen">
Het gezichtsveld van de Scanmarker is 10 mm. Hiermee kan een maximale lettergrootte van 24 of 26 punten worden gescand.
</div>

<p onClick="uitvouwen('sc4’)” style="cursor:hand;”> 1.4 Wat is de grootte van de Scanmarker?</p>
<div id="sc4” class="wisselen">

Het gezichtsveld van de Scanmarker is 10 mm. Hiermee kan een maximale lettergrootte van 24 of 26 punten worden gescand.
</div>


Tot 1.2 werkt de code nog. Daarna niet meer..

Wie kan bij alsjeblieft helpen. Ik ben hier al 2 dagen mee aan het puzzelen.

Gr. Marre
 
Laatst bewerkt door een moderator:
Hoi,
Welkom op dit forum:)
Het is gewenst om uw code tussen de codetags te zetten(Ga geavanceerd,# gebruiken), het is een stuk duidelijker en meestal krijg je sneller een antwoord.
Probeer ook de hoeveelheid informatie te beperken tot de essentie van uw vraag.
Volgens mij bedoel je zoiets:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FAQ</title>
<script language="javascript" type="text/javascript">
function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}
</script>
<style type="text/css">
   /* This CSS is just for presentational purposes. */
   body {
      font-size: 62.5%;
      background-color: #777; }
   #wrap {
      font: 1.3em/1.3 Arial, Helvetica, sans-serif;
      width: 30em;
      margin: 0 auto;
      padding: 1em;
      background-color: #fff; }
   h1 {
      font-size: 200%; }

   /* This CSS is used for the Show/Hide functionality. */
   .more {
      display: none;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }
a.hideLink1 {      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
</style>
</head>
<body>
   <div id="wrap">
      <h1>Veel gestelde vragen:</h1>
      <p><a href="index.htlm">Home.</a></p>
      <p><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">1.1 Welke talen kan de Scanmarker scannen en vertalen? </a></p>
	  <div id="example" class="more">
         <p>De scanmarker ondersteunt 44 verschillende talen. 
		 Wanneer een extra taal vereist is, gelieve een e-mail te sturen met dit verzoek naar <a href="mailto:info@scanmake.nl">info@scanmake.nl</a>.
		 Nederlands
		 Estonian
		 Italiaans
		 Portugees(Portugal)
		 Turks
		 Engels
		 Fins
		 Japans
		 Portugees(Brazilië)
		 Oekraïens
		 Spaans
		 Oostenrijks
		 Koreaans
		 Roemeens
		 Welsh
		 Duits,
		 Kroatisch
		 Latijns
		 Russisch,
		 Jiddisch,
		 Frans
		 Galicisch
		 Lets
		 Servisch
		 Chinees (vereenvoudigd)
		 Bulgaars
		 Litouws
		 Slovaaks
		 Chinees (traditioneel)
		 Grieks
		 Sloveens
		 Tsjechisch
		 Hebreeuws,
		 Moldavisch
		 Zoeloe
		 Deens
		 Hongaars
		 Noors
		 Zweeds
		 Esperanto
		 Ijslands,
		 Pools
		 Zwiterduits </p>
         <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Terug</a></p>
      </div>
      <p><a href="#" id="example1-show" class="showLink" onclick="showHide('example1');return false;">1.2 Wat is de maximale lettergrootte dat kan worden gescand?</a></p>
      <div id="example1" class="more">
         <p>Het gezichtsveld van de Scanmarker is 10 mm. Hiermee kan een maximale lettergrootte van 24 of 26 punten worden gescand.</p>
         <p><a href="#" id="example1-hide" class="hideLink" onclick="showHide('example1');return false;">Terug</a></p>
      </div>
	  <p><a href="#" id="example3-show" class="showLink" onclick="showHide('example3');return false;">1.3 Vraag3</a></p>
      <div id="example3" class="more">
         <p>Antwoord3.</p>
         <p><a href="#" id="example3-hide" class="hideLink" onclick="showHide('example3');return false;">Terug</a></p>
      </div>
   </div>

</body>
</html>
Laat maar iets weten als er nog vragen zijn.
Greetz
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan