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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>