Geek asks and answers

Show Hide DIV with jQuery

I have this simple jQuery Show / Hide function that explicitly shows and hides a div. There are three things that I cannot do myself.

<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>

  • I am looking for a way to change the text on an anchor tag to say show / hide. I know this has been asked before, many times. But I can’t find specific examples for my script until the text changes on click, but not on subsequent clicks.

  • the script hides the div, pushing it out of the view, however I need the part on the div that is visible in this way, I can bind the button tag (anchor) that the user clicks.

  • Finally, when the user clicks the Hide button, the div is removed from the view only to reappear when the user refreshes the page. How can I make a div stay hidden, but only when the user clicks a button?

, , constantcontact.com. , , , .

.

.

+2
6

, (imo) + ( ). . , , ( , , , ).

.

/ . cookie ( , - , -, cookie - , t ).

, jQuery Cookie Plugin, ( ) . , , , cookie . , , , (- cookie). cookie , , .

<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 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 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>
+6

  • , JQuery.

    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')) {

    }

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

, , cookie.

+1
$(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;
    });

});

.

0
  • if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/}, , / .
  • show/hide , .
  • cookie Local Storage , . / .
0

JQuery java script

    $ (document) .ready (function () {$ ("# purchase_order"). click (function () {$ ("Salep") hide (). $ ("Saleo.") Show (). $ ("# Purchase_order ") hide (). $ (" # Sale_order ") show ().});
0
source

More articles:


All Articles