jQuery -> Div Einklappen und Mindesthöhe behalten.

[goto;]

Hallo liebe Community, leider bin ich in jQuery noch nicht so bewandert.
daher brauch ich etwas Hilfe.
Hab mich zwar schon ein paar mal mit dem Thema beschäftigt, nur reicht mein Wissen noch nicht aus.
Unzwar soll ein Div auf und zu gehen. Dieses mach ich über eine Class in einem Button.(Siehe Script)
Die Animation habe ich zuvor mit Slideup->down realisiert, nun wollte ich aber das eine Mindesthöhe bein Slideup bleibt, da in dem Div noch ein Textbereich bleiben soll mit Rahmen, damit man auch sieht, dass dort noch etwas steht .. Also habe ich die function geändert zu einer .animate geändert und dieser wollte ich den .attr->Wert "height:50" verpassen..
Dies Funktioniert auch noch. Problem ist nun nur, dass der Div Inhalt nun sichtbar bleibt... Wenn ich nun die opacity setze, verschwindet alles.

Gibt es dafür eine Sinnvollere oder schon vorgesehen Lösung die ich nicht kenne?
Hier noch mein Script

$(document).ready(function() {
  $("#hideshow").toggle(
          function() {
                $("#div1").animate({ opacity: "hide"},"slow", function() {
                
                 $("#hideshow").attr({
                 'value' : 'Aufklappen',
                 })
           });
    },
        function(){
            $("#div1").slideDown("slow", function() {
                
                $("#hideshow").attr({
                 'value' : 'Einklappen',
                })
            });
        })

    });

Vielen vielen Dank im Vorraus
Mfg Splater

 

[SpiceLab]

nun wollte ich aber das eine Mindesthöhe bein Slideup bleibt, da in dem Div noch ein Textbereich bleiben soll mit Rahmen, damit man auch sieht, dass dort noch etwas steht .. Also habe ich die function geändert zu einer .animate geändert und dieser wollte ich den .attr->Wert "height:50" verpassen..

Eine Mindesthöhe wird nicht mit height sondern mittels min-height definiert.

Desweiteren besitzt das <div>-Element gemäß seiner HTML-Attribut-Referenz überhaupt nicht dieses Attribut, sondern wird mit CSS entsprechend formatiert.

Kurzer Test:

<div id="div1" height="50" style="background:#eee">Bin ich 50px hoch?</div>

<div id="div2" style="height:50px;background:#eee">Nö, dafür aber ich!</div>

 

[goto;]

Ah genau, also müsst ich in jQuery dieses dann mit .css realisieren. Supi, danke für den Anstoß

 

[CPoly]

Noch als Tipp:
Für das Attribut "value" gibt es ein Shorthand.

$("#hideshow").attr({
    'value' : 'Aufklappen',
})
//kann man auch so schreiben
$("#hideshow").val('Aufklappen');
//und zum auslesen so
var foobar = $("#hideshow").val();

Und die Kurzform für eine Opacity-Animation kennst du bestimmt.

$("#div1").animate({ opacity: "hide"},"slow", function() {});
//is nichts anderes als
$("#div1").fadeOut("slow", function() {});
//entsprechend gibt es auch fadeIn()

 

[goto;]

Aiaiai, jetzt bin ich überfordert. Also erstmal Danke für deine Antwort, leider ist fade nicht wirklich das, was ich Suche. Der Container soll nur geschlossen werden und auch wieder geöffnet. Jedoch soll beim schließen der Inhalt hidden sein und der Container noch 15px groß sein, damit man die erste Zeile noch sieht.
Nur rein mit Mindesthöhe will auch nicht so recht klappen, der Inhalt der Box wird weiterhin angezeigt.
Mfg Splater

 

[SpiceLab]

Was hälst du von meinem Vorschlag, deine Seite online zu stellen, damit wir auch eine Chance erhalten, den Problemfall in Aktion zu erleben?

Ansonsten werden wir uns hier wohl eher noch weiter im Kreis drehen, und dich lediglich mit halbgaren Vorschlägen beglücken.

 

[CPoly]

Jedoch soll beim schließen der Inhalt hidden sein und der Container noch 15px groß sein, damit man die erste Zeile noch sieht.
Nur rein mit Mindesthöhe will auch nicht so recht klappen, der Inhalt der Box wird weiterhin angezeigt.

Du scheinst dich hier zu widersprechen. Soll die erste Zeile jetzt sichtbar sein oder soll der Inhalt versteckt werden und der Kasten lediglich 15px zu sehen sein, aber eben leer?
Vielleicht hilft dir die CSS-Eigenschaft overflow:hidden weiter.

 

[SpiceLab]

Neben overflow:hidden könnte auch die clip-Eigenschaft genutzt werden, um den Anzeigebereich eines Elements einzugrenzen.

Der Unterschied zu overflow liegt in der praktischen Anwendung / Umsetzung, da clip sich ausschließlich auf absolut positionierte Elemente anwenden lässt.

 

[goto;]

Oh entschuldigung, ich meinte damit, dass wenn die Box geschlossen wird. Das diese 15px groß bleiben sollte.. und der untere Inhalt nicht sichtbar sein soll. Ich werd es dann mal mit overflow versuchen.
Mfg Splater

 

[SpiceLab]

Sollte auch dieser Versuch scheitern, wäre es dann langsam an der Zeit, deinen Quellcode hier detailierter zu präsentieren, als deinen eingangs gezeigten Code-Schnipsel - am Einfachsten und Effektivsten mit einem Link zur Online-Fassung.

Andernfalls könnte sich dein Anliegen für die Beteiligten in eine trostlose Quizshow wandeln.