Hallo, ich probiere jetzt schon geraume Zeit herum, aber ich stehe auf dem Schlauch ... kann mir bitte jemand draufhelfen, warum das hier nicht geht?
Kompliziert KANN es nicht sein!
Hier ist das Beispiel nachgebaut:
test
Bei Klick auf den roten Text, soll eine Ebene eingeblendet werden und der Text verändert. das geht auch soweit.
Und es soll beim erneuten Klick der Text wieder zurück geändert werden und die Ebene wieder zugeklappt werden.
Dazu habe ich beim aufklappbefehl die klasse "offen" per addClass hinzugefügt und die ursprüngliche "e-open" mit removeClass entfernt.
das geht auch.
Aber der zuklapp-Befehl mit dem selector auf die neue Klasse "offen", wird dann nur teilweise ausgeführt. Die Ebene wird zwar wiederzugeklappt, aber der Text ändert sich nicht zurück.
hier der Code der Seite:
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=utf-8" />
<title>test</title>
<style type="text/css">
div{border:1px solid green; width:50%; position:relative; padding:60px 20%; background-color:#FC9;}
.english-text{width:50%; padding:30px 20%; display:none; position:relative;}
.english-text-close{width:60px; height:20px; color:red; position:absolute; top:5px; right:5px; cursor:pointer;}
.e-open, .offen{color:red; cursor:pointer; text-align: right;}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br />
aaaa aaa aa aaaaaaaaaaaaaa aaa aaa
aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br />
aaaa aaa aa aaaaaaaaaaaaaa aaa aaa
aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br />
aaaa aaa aa aaaaaaaaaaaaaa aaa aaa
aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br />
aaaa aaa aa aaaaaaaaaaaaaa aaa aaa</div>
<div class="e-open"><h3>klapp die verborgnene ebene auf und ändere deinen eigenen text</h3></div>
<div class="english-text">
dögkldjfögkjöl dlgkjd jkldfg<br />
gjdflgk jdg <br />
ldfgj dfg <br />
dlfgjk dg <br />
dfg jdfg dlg <br />
dfg djfg <br />
dfg dfkjg dlkfg <br />
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".e-open").click(function(){
$(".english-text").slideToggle("slow");
$(this).html('<h3>klapp wieder zu und ändere deinen text zurück x</h3>');
$(this).addClass('offen');
$(this).removeClass('e-open');
});
$(".offen").click(function(){
$(".english-text").slideToggle("slow");
$(this).html('<h3>klapp die verborgnene ebene auf und ändere deinen eigenen text</h3>');
$(this).addClass('e-open');
$(this).removeClass('offen');
});
<!--abschlussklammer-->
});
</script>
</body>
</html>
Vielen Dank für eure Hilfe!!