mikdoe
Moderator
Die Frage ist etwas schwer in eine Zeile zu fassen, daher hab ich Code vorbereitet, wo auch geich die Fragen drin stehen.
Wie kann ich das erreichen?
Das dort gezeigte DOM müsste grob so bleiben, weil es noch andere Abhängigkeiten gibt die jetzt aber hier für den Effekt nicht zwingend gezeigt werden brauchen.
Code für den Browser: Test Drüberschieben
Dasselbe in JS Fiddle: https://jsfiddle.net/gwyhe9eL/1/
Und nochmal dasselbe direkt als Code:
Wie kann ich das erreichen?
Das dort gezeigte DOM müsste grob so bleiben, weil es noch andere Abhängigkeiten gibt die jetzt aber hier für den Effekt nicht zwingend gezeigt werden brauchen.
Code für den Browser: Test Drüberschieben
Dasselbe in JS Fiddle: https://jsfiddle.net/gwyhe9eL/1/
Und nochmal dasselbe direkt als Code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Test Drüberschieben</title>
<style type="text/css">
.kasten{
border: 2px solid blue;
border-style: outset;
padding: 3px;
display: inline-block;
position: relative;
}
.span_links{
padding-right: 5px;
line-height: 20px;
}
.form{
padding-top: 5px;
}
.div_toggle_tab{
width: 100%;
background-color: lightgrey;
}
.toggle_td_links{
width: 16px;
cursor: pointer;
}
.toggle_td_mitte{
font-weight: bold;
cursor: pointer;
font-size: smaller;
}
.toggle_img{
padding-right: 5px;
vertical-align: center;
}
.div_innen{
position: absolute;
background-color: white;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div style="padding-top:10px;">
<div class="kasten" id="kastenid">
<div class="div_toggle_tab">
<table cellspacing="0" cellpadding="0">
<tr>
<td id="toggle_tdl" title="Auf- und Zuklappen" class="toggle_td_links"><img id="toggle_img" class="toggle_img" src="http://mikdoe.lima-city.de/images/toggle_plus.png"></td>
<td id="toggle_tdm" title="Auf- und Zuklappen" class="toggle_td_mitte">Kastenüberschrift, hier auf-/zuzuklappen</td>
</tr>
</table>
</div>
<div id="toggle_innen" style="display: none;" data-offen="n">
<form id="zielform" class="form">
<span class="span_links">Kleiner Präfix Text für das select Feld:</span>
<span><select id="sel"><option value="x">Bitte wählen</option><option value="1">bitte mal diesen Eintrag selektieren</option></select></span>
</form>
</div>
</div>
</div>
Feld 1: <input type="text"><br>
Feld 2: <input type="text">
<br>
<br>
<br>
<span style="color:red;"><u>Mein Wunsch:</u><br>
=> der obere Kasten soll sich exakt genau so verhalten wie ohne die class "div_innen", das heißt, er nimmt sich Breite wie nötig<br>
=> aber er soll sich auch gleichzeitig über die beiden darunter liegenden Felder öffnen und diese <b>nicht</b> nach unten verschieben, also so wie mit der class "div_innen"<br>
<br>
Wie kann ich beides gleichzeitig erreichen?</span>
<br>
<br>
<br>
<input type="button" id="class_toggle" value="Class 'div_innen' ist entfernt (hier umschalten)">
<script>
function aufzu() {
if (document.getElementById('toggle_innen').getAttribute('data-offen') == 'n') {
document.getElementById('toggle_innen').style.display = '';
document.getElementById('toggle_innen').setAttribute('data-offen','j');
document.getElementById('toggle_img').src = 'http://mikdoe.lima-city.de/images/toggle_minus.png';
}
else {
document.getElementById('toggle_innen').style.display = 'none';
document.getElementById('toggle_innen').setAttribute('data-offen','n');
document.getElementById('toggle_img').src = 'http://mikdoe.lima-city.de/images/toggle_plus.png';
}
}
document.getElementById('toggle_tdl').onclick = function() { aufzu(); };
document.getElementById('toggle_tdm').onclick = function() { aufzu(); };
document.getElementById('class_toggle').onclick = function() {
if (jQuery('#toggle_innen').hasClass('div_innen')) {
jQuery('#toggle_innen').removeClass('div_innen');
document.getElementById('class_toggle').value = 'Class "div_innen" ist entfernt (hier umschalten)';
}
else {
jQuery('#toggle_innen').addClass('div_innen');
document.getElementById('class_toggle').value = 'Class "div_innen" ist drin (hier umschalten)';
}
};
document.getElementById('sel').onchange = function() {
var s = document.createElement('span');
s.innerHTML = 'Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum';
var br = document.createElement('br');
document.getElementById('zielform').appendChild(br);
document.getElementById('zielform').appendChild(s);
}
</script>
</body>
</html>