JavaScript Textboxen die aufklappen
Kann kein JavaScript. Kann man das vielleicht so umschreiben, dass es möglich wird, in den Link auch noch etwas anderes rein zu schreiben als wie die Wörter die in dem Script abgeglichen werden. Also "[Aufklappen]" und "[Schliessen]" ...
Ich will halt, dass man auf der ganzen div-box, die um den Link liegt, drauf klicken kann..
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '[Aufklappen]') {
link.innerHTML = '[Schliessen]'; d.style.display = 'block';
} else { link.innerHTML = '[Aufklappen]'; d.style.display = 'none';
}
}
<div>
<div>
<a href="javascript: void(0);" onClick="toggle(this, 'box1');">[Aufklappen]</a>
</div>
<div id="box1" style=display:none>
// Inhalt aufgeklappt
</div>
</div>
5 Antworten
Dann einfach mit onclick oder onmouseover events als Attribute in den Container, also das div, und dann müsste es gehen... Also dann wie <div onclick="openFold()">...</div>, wobei "openFold()" einfach nur deine Funktion zum zeigen des Folds ist...
Klar,
Das obige Javascript sagt nur, dass wenn der Link aufklappen aus dem unteren Div geklickt wird, der div id="box1" sichtbar wird....
Diesen kannst Du jetzt ganz normal erstellen belegen (mit HTML und css)....
Falls Du ein anderes Wort als aufklappen im Text haben willst musst Du dies einmal im Link des unteren DIV's austauschen und gleichzeitig in der If Bedingung des Scripts oben...
Der schließen Link wird oben im Script erstellt, den kannst Du einfach umbenennen...
Hast mich falsch verstanden. Der Link soll ja noch andere Elemente fassen, als wie die Schlüsselwörter. Was natürlich nicht geht und auch in CSS nicht gemacht werden kann. Außer mit einer mit CSS eingebauten BG-Grafik
So?
<script>
function toggle() {
var lText = this.innerHTML;
var d = document.getElementById('box1');
if (lText == '[Mein Titel]') {
this.innerHTML = '[Schliessen]'; d.style.display = 'block';
}
else {
this.innerHTML = '[Mein Titel]'; d.style.display = 'none';
}
}
</script>
<div>
<div onClick="toggle();">[Mein Titel]</div>
<div id="box1" style="display:none">
// Inhalt aufgeklappt
</div>
</div>
Ja aber ich hab jetzt einen besseren Code gefunden, der nicht mehr auf die Schlüsselwörter abbrüft:
function toggle(control){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
}
.
<h3><a href="javascript:toggle('box3')">Haltbarkeit</a></h3>
<div id="box3" style="display: none">
//aufgeklappt
</div>
http://stackoverflow.com/questions/8746882/jquery-contains-selector-uppercase-and-lower-case-issue
Or override the existing .contains filter:
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
<a onclick="aufklappen()">Aufklappen</a>
<textarea style="display:none;" id="textbox"></textarea>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script> function aufklappen() { $("#textbox").show(); }
........