jquery Toggle tut nicht
Habe mir folgende Funktionalität ergoogelt:
.....
Jetzt möchte ich das abgewandelt einsetzen:
....
Und das funktioniert nicht.
Also der Plan wäre, dass die zweite TR Zeile ein und ausgeblendet wird, zu Anfang definitiv ausgeblendet ist. Ist das display:none hier der falsche Weg? Muss da irgendwie onload='this.hide();' hin?
BTW: mit der id="form6" kann ich nur bedingt arbeiten, die ändert sich ständig, liegt in dieser Zeile aber als Variable vor.
Und dass das Formular noch unvollständig ist, weiß ich
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<titel>teswt seite</titel>
<script src="/js_webseite/jquery.js"></script>
<style>
html {
text-align: center;
}
button {
margin-top: 100px;
padding: 10px 30px;
color: #FFF;
background-color: #db5757;
box-shadow: 0px 17px 10px 7px rgba(0, 0, 0, 0.4);
border: solid 3px #db5757;
border-radius: 5px;
font-size: 30px;
}
.aufzu {
height: 20px;
}
</style>
</head>
<body>
<b>Arbeitsschritte</b>
<table width="95%">
<table>
<tr class="tabletr" style="color: #000;">
<td>Telefonanlage</td>
<td>in der PBX Nebenstelle einrichten</td>
<td><button><img class="aufzu" src="/image/pfeil_unten.jpg" alt="aufklappen und bearbeiten" /></button></td>
</tr>
<tr class="tabletr" id="form6" style="height: 0;">
<td colspan="3" valign="top">
<div class="trslide">
<form id="stepfertig" method="post">
<table>
<tr id="" valign="top">
<td><small>FN? SIP? Durchwahl:</small><br><input type="text" name="ergebnis" size=30 maxlength=100 required /></td>
<td><small>Bemerkung</small><br /><textarea rows="4" cols="40"></textarea></td>
<td><button>fertigstellen und speichern</button></td>
</tr>
</table>
</form>
</div>
</td>
</tr>
<tr class="tabletr" style="color: #000;">
<td>Telefonanlage</td>
<td>in der PBX Nebenstelle einrichten</td>
<td><button><img class="aufzu" src="/image/pfeil_unten.jpg" /></button></td>
</tr>
<tr class="tabletr" id="form6" style="height: 0;">
<td colspan="3" valign="top">
<div class="trslide">
<form id="stepfertig" method="post">
<table>
<tr id="" valign="top">
<td><small>FN? SIP? Durchwahl:</small><br /><input type="text" name="ergebnis" size=30 maxlength=100 required /></td>
<td><small>Bemerkung</small><br /><textarea rows="4" cols="40"></textarea></td>
<td><button>fertigstellen und speichern</button></td>
</tr>
</table>
</form>
</div>
</td>
</tr>
<tr class="tabletr" style="color: #000;">
<td>Telefonanlage</td>
<td>in der PBX Nebenstelle einrichten</td>
<td><button><img class="aufzu" src="/image/pfeil_unten.jpg" /></button></td>
</tr>
<tr class="tabletr" id="form6" style="height: 0;">
<td colspan="3" valign="top">
<div class="trslide">
<form id="stepfertig" method="post">
<table>
<tr id="" valign="top">
<td><small>FN? SIP? Durchwahl:</small><br><input type="text" name="ergebnis" size=30 maxlength=100 required /></td>
<td><small>Bemerkung</small>
<br><textarea rows="4" cols="40"></textarea></td>
<td><button>fertigstellen und speichern</button></td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
</table>
<script>
$(document).ready(function() {
$("img.aufzu").click(function() {
$(this).closest("tr").next("tr").slideToggle();
});
});
$(document).ready(function() {
$("img.aufzu").click(function() {
$(this).closest("tr").next("tr").find(".trslide").slideToggle();
});
});
</script>
</body>
</html>