Anzeigen Ausblenden DIV mit Jquery

Habe ich dieses simple JQuery Einblenden/Ausblenden-Funktion, die offensichtlich zeigen und verstecken von div.
Es gibt drei Dinge, die ich nicht auf meinem eigenen.

<script type="text/javascript">
  $(document).ready(function() {
  $('#showHideBox').show();

  $('#showHidetoggle').click(function() {
  $("#showHidetoggle").text("Show me")

    $('#showHideBox').slideToggle(250);
    return false;
  });
});
</script>

<a href="#" id="showHidetoggle">Hide Me</a>

Ich bin auf der Suche nach einer Möglichkeit, ändern Sie den text auf der Anker-tag um zu sagen, ein - /ausblenden.
Ich weiß, das wurde vorher gefragt, viele Male. Aber ich kann nicht scheinen, finden Sie konkrete Beispiele, um mein Skript, so weit ändert sich der text auf Klick, aber nicht den nachfolgenden Klicks.
Das Skript blendet die div-durch schieben aus der Sicht brauche ich allerdings einen Teil auf das div sichtbar auf diese Weise kann ich der Anlage die Taste (Anker) - Tags, die der Benutzer klicken Sie auf.
Schließlich, wenn der Benutzer auf " ausblenden, div gleitet der Blick nur wieder zu erscheinen, wenn der Benutzer die Seite aktualisiert. Wie kann ich das div verborgen bleiben, aber nur angezeigt, wenn der Benutzer klicken Sie auf die Schaltfläche?

Ein Beispiel von dem, was ich bin versucht zu erreicht, ist auf dieser Seite gefunden werden kann auf constantcontact.com. Schauen Sie am Fuß, Sie werden sehen, es gleitet-außer Sicht, aber der button ist noch sichtbar.

Jede Hilfe wird sehr geschätzt.

Danke an alle.

InformationsquelleAutor JMB | 2011-05-07

So, um dies zu erreichen, ist der einfachste Weg (imo) erstellen eines Containers für die Taste + box (die Sie ausblenden möchten). Ihr button wird bleiben, immer. Wenn die Seite geladen wird, legen wir ein Ereignis-Schaltfläche, zeigen Sie und verstecken Sie Ihre box auf der Basis der box den aktuellen Zustand (wenn es verborgen ist, es zeigen und wenn es sichtbar ist, zu verstecken.

Einfach genug.

Nun, Sie wollen auch weiterhin bestehen, sichtbar/verborgen Zustand zwischen laden der Seite /- Seite besucht. Um dies zu erreichen, Sie gehen zu müssen, um ein cookie auf dem browser des Benutzers (side note, wenn ein Benutzer angemeldet ist oder etwas, die Sie tun können, diese andere Art - aber ein cookie ist der leichteste Weg, um bekommen es zu tun und nicht um ein server-roundtrip zum speichern von Daten in Ihre Datenbank).

Um dies zu tun, schlage ich vor, zu gehen und bekommen die jQuery Cookie Plugin es ist wirklich einfach zu bedienen (wie Sie unten sehen werden) und nimmt eine Menge von den Kopfschmerzen, die aus dem Umgang mit cookies. Jedes mal, wenn der Benutzer klickt auf die Schaltfläche, und ändern Sie den Zustand der box, Sie gehen zu schreiben, ein cookie an den browser des Benutzers und speichern Sie den aktuellen Zustand der box. So, wenn der Benutzer neu laden der Seite, werden Sie wissen, was der aktuelle Stand ist (wegen der Cookies). Im Beispiel unten habe ich das cookie verfallen, in einem Jahr, aber Sie können ändern, wenn du willst.

<div id="ShowHideContainer">
    <p><a id="ShowHideButton">Click Here To Hide!</a></p>
    <div id="ShowHideBox">text that gets shown and hidden, woo</div>
</div>

<script>
$(document).ready(function()
{
    var $ShowHideBox = $('#ShowHideBox').hide(),
        $ShowHideButton = $('#ShowHideButton');

    /* Initialize the box based on the state of the cookie in the user's browser*/
    initBox();

    $('#ShowHideButton').click(function() {

        if (boxVisible())
        {
            //the box is visible. lets hide it.
            hideBox();
        }
        else
        {
            //the box is invisible. show it.
            showBox();
        }
    });

    function initBox()
    {
        //if the cookie says this is visible, and it's not...show it
        if ( $.cookie('BoxVisible') && ! boxVisible() )
        {
            showBox();
        }
        //if the cookie says this is not visible, and it is...hide it
        else if ( ! $.cookie('BoxVisible') && boxVisible() )
        {
            hideBox();
        }
    }  

    //check to see if the box is visible or not, currently
    function boxVisible()
    {
        return $ShowHideBox.hasClass('hidden')? false : true;
    }

    //show the box, change the button text, and set the cookie
    function showBox()
    {
        $ShowHideBox.slideUp(250).removeClass('hidden');
        $ShowHideButton.html("Click Here to Hide!");
        $.cookie('BoxVisible', 1, {expires: 365});
    }

    //hide the box, change the button text, and set the cookie
    function hideBox()
    {
        $ShowHideBox.slideDown(250).addClass('hidden');
        $ShowHideButton.html("Click Here to Show!");
        $.cookie('BoxVisible', 0, {expires: 365});
    }
});
</script>

+1 für die erste Antwort
+1 für eine einfache, aber elegante

InformationsquelleAutor Jim Rubenstein

Habe ich verändert den code aus dem folgende slide-Effekt tutorial zu Alternative a
anzeigen und ausblenden von Anker-tag auf der JQuery-click-Ereignis.

Einen funktionierenden Beispiel code unten gesehen werden kann, in diesem JSFiddle:

$(document).ready(function () {

    $("#hide").click(function () {
        $(".target").hide("slide", {
            direction: "up"
        }, 500);
        $('#show').show();
        $('#hide').hide();
    });

    $("#show").click(function () {
        $(".target").show("slide", {
         direction: "up"
        }, 500);
        $('#show').hide();
        $('#hide').show();
    });


    if ($('.target').is(':visible')) {

    }

});

InformationsquelleAutor Joe

$('#showHidetoggle').click(function() {  
    var boxText = $('#showHideBox').is(":visible") ? "Show me" : "Hide me";
    $("#showHidetoggle").text(boxText);
    $('#showHideBox').slideToggle(250);
    return false;
});

Sparen, der Staat, müssen Sie entweder verwenden Sie server-side-code oder verwenden ein cookie.

InformationsquelleAutor Peter Olson

$(document).ready(function() {
    $('#showHideBox').show();

    $('#showHidetoggle:not(.hideme)').click(function() {
        $(this).html("Hide me").addClass("hideme");
        $('#showHideBox').animate({height: '100px'}, 250); //Or whatever height you want
        return false;
    });

    $('#showHidetoggle.hideme').click(function() {
        $(this).html("Show me").removeClass("hideme");
        $('#showHideBox').animate({height: '300px'}, 250); //Or whatever height it was orginally.
        return false;
    });

});

Sollte den trick tun.

Ist das nicht komplizierter als es sein muss?
Mit sichtbar ist, wird nicht funktionieren, wenn er will, animieren zu einer bestimmten Höhe zu halten Sie die Taste sichtbar – aber ja, es ist wahrscheinlich nicht der beste Weg!

InformationsquelleAutor Rich Bradshaw

0
1. Können Sie if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/} um den text zu ändern, um zu zeigen/verstecken, wie gebraucht.
2. Werden Sie wollen, stellen Sie die Schaltfläche ein - /ausblenden außerhalb der box, die Sie verbergen.
3. Können Sie verwenden, cookies oder sessions oder Lokale Speicherung zum speichern von Informationen, die es zu bleiben in Seite geladen wird. Müssen Sie den ursprünglichen Zustand der box angezeigt/ausgeblendet wenn die Seite geladen wird.
InformationsquelleAutor mdonoughe
0

Wie Hide & show-tag mit Jquery & java-script

$(document).bereit(Funktion () {
$("#purchase_order").klicken Sie auf(Funktion () {
$(".salep").hide();
$(".saleo").show();
$("#purchase_order").hide();
$("#sale_order").show();
});

"#"Kennzeichnen-id '.' an-Klasse
So können Sie einstellen, ur div-Klasse & button-id

InformationsquelleAutor Mohit Kotak

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Wie Hide & show-tag mit Jquery & java-script