Expandera/Döja text, allt i Javascript
Har två text stycken som skall vara dolda från början men som ska expanderas/döljas med två olika länkar. All funkar bra med länkarna i HTML dokumentet men när jag plockar bort dom och sätter in dom med createElement i Javascriptet så funkar det helt enkelt inte.
Om nån vill testa kan man enkelt skapa en länk i HTML dokumentet och kalla på scriptet med onclick showHide(this.id,show1) för första paragrafen. Men som sagt, jag vill ha det funkerade med att även ha länkarna skapta i Javascript. Så vad är det jag missar?
Så om nån upptäcker mitt fel så är jag glad för feedback på vad som är fel.
HTML koden är basic...
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Hidden textarea</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/js_hiddentext.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<div class="post">
<h3>
Javascript
</h3>
<p class="author">
posted by
</p>
<aside>
Använda Javascript
</aside>
<p>
En introduktionstext som skall bli längre....
</p>
<p class="show" id="show1">
...så att vidare information kan visas. Här kommer då en längre exempel text där användaren kan läsa mera
om just denna post. Detta är en vanlig funktion som du kan hitta på många vanliga webbsidor som säljer
produkter.
</p>
</div>
<div class="post">
<h3>
Javascript
</h3>
<p class="author">
posted by
</p>
<aside>
Tänk vad mycket man kan göra
</aside>
<p>
Även detta textstycke skall utökas...
</p>
<p class="show" id="show2">
...så att vidare information kan visas. Här kommer då en längre exempel text där användaren kan läsa mera
om just denna post. Detta är en vanlig funktion som du kan hitta på många vanliga webbsidor som säljer
produkter.
</p>
</div>
</div>
</div>
</body>
</html>
Javascriptet...
/* Function created by "Simon Willson" to be able to
call several functions with a single event */
//Create the function
function addLoadEvent(func) {
//Create a variable for window.onload event
var oldonload = window.onload;
//If window.onload is NOT a function, then assign 'func' to window.onload
if (typeof window.onload != 'function') {
window.onload = func;
//If window.onload already is a function then make a new function
} else {
window.onload = function() {
//To do what the old onload function did
if (oldonload) {
oldonload();
}
//then do whatever the new function does
func();
}
}
}
//Create two links, link1 & link2 and position them before each relevant paragraph element
function newLink() {
var dv, newLink;
dv = document.getElementById('show1');
newLink = document.createElement('a');
newLink.setAttribute('id','show1_link');
newLink.setAttribute('href','#');
newLink.setAttribute('onclick','showHide(this.id,elemId);');
var newLinkText = document.createTextNode('Visa mera information');
newLink.appendChild(newLinkText);
dv.parentNode.insertBefore(newLink,show1);
}
addLoadEvent(newLink);
function newLink2() {
var dv, newLink;
dv = document.getElementById('show2')
newLink = document.createElement('a');
newLink.setAttribute('id','show2_link');
newLink.setAttribute('href','#');
newLink.setAttribute('onclick','showHide(this.id,elemId);');
var newLinkText = document.createTextNode('Visa mera information');
newLink.appendChild(newLinkText);
dv.parentNode.insertBefore(newLink,show2);
}
addLoadEvent(newLink2);
function showHide(link_id,elemId) {
//Create a variable for the link and the paragraph
var link = document.getElementById(link_id);
var text = document.getElementById(elemId);
//Make a check to distinguish visible from hidden
var status = (text.style.display == 'block') ? 'none' : 'block';
text.style.display=status;
//Change the text on the link depending on if the value is true or false
link.innerHTML = (status == 'block') ? 'Visa mindre information' : 'Visa mera information';
}
adLoadEvent(showHide);
För att komma åt dom båda paragraferna lade jag även in var sitt Id, optimalt vore om man endast kunde kalla på klassen show, så det får vara tills vidare om ingen annan har en bra lösning på även de. Måste skriva om funktionen i så fall...
