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
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.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;
}
</style>
<b>Arbeitsschritte</b><table width="95%">
<tr class="tabletr" style="color: #000;">
<td>Telefonanlage</td>
<td>in der PBX Nebenstelle einrichten</td>
<td><button><img class="aufzu" src="erweitern.png" 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" action="/_BR-Project/index.php?action=project&do=details&id=2&stepfertig=1&tid=4" 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 name=\"bemerkung\" rows="4" cols="40" ></textarea></td>
<td><button><img alt="fertigstellen und speichern" src="ok.png"></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="erweitern.png" 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" action="/_BR-Project/index.php?action=project&do=details&id=2&stepfertig=1&tid=4" 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 name=\"bemerkung\" rows="4" cols="40" ></textarea></td>
<td><button><img alt="fertigstellen und speichern" src="ok.png"></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="erweitern.png" 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" action="/_BR-Project/index.php?action=project&do=details&id=2&stepfertig=1&tid=4" 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 name=\"bemerkung\" rows="4" cols="40" ></textarea></td>
<td><button><img alt="fertigstellen und speichern" src="ok.png"></button></td>
</tr>
</table></form>
</div>
</td>
</tr>
<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>
Comments