Show Hide DIV with Jquery

Question

I have this simple JQuery Show/Hide function that obviously show and hide a div. There are three things I cannot do on my own.

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

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

2. The script hides the div by sliding it out of view however, I need a portion on the div visible this way I can attached the button (anchor) tag that the user will click.

3. Finally, when the user clicks hide, the div slides out of view only to reappear when the user refreshes the page. How can I make the div stay hidden but only appear when the user click the button?

An example of what I am trying to accomplished is on this page can be found on constantcontact.com. Look at the footer, you'll see it slides out of view but the button is still visible.

Any help will be greatly appreciated.

Thanks everyone.

Answer 1

So, to accomplish this, the easiest way (imo) is to create a container for your button + box (that you want to hide). Your button will stay put, always. When the page loads, we attach an event to your button that will show and hide your box based on the box's current state (if it's hidden, show it and if it's visible, hide it).

Easy enough.

Now, you also want to persist that visible/hidden state between page loads / page visits. To accomplish this, you're going to need a cookie on the user's browser (side note, if your user is logged in or something, you can do this another way - but a cookie is the lightest way to get it done and doesn't involve a server round-trip to save data to your database).

In order to do this, I suggest going and getting the jQuery Cookie Plugin it's really simple to use (as you'll see below) and takes a lot of the headaches out of dealing with cookies. Every time your user clicks your button, and you change the state of the box, you're going to write a cookie to the user's browser and store the current state of the box. That way, when the user re-loads the page, you will know what the current state is (because of the cookie). In the example below, I set the cookie to expire in a year, but you can change that if you want.

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

Answer 2

1. I've altered the code from the following slide effect tutorial to alternate a hide and show anchor tag on the JQuery click event.

   A working example of the code below can be seen in this 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')) {
   
       }
   
   });
   

Answer 3

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

To save the state, you need to either use server side code or use a cookie.

Answer 4

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

});

Should do the trick.

Answer 5

1. You can use if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/} to change the text to show/hide as needed.
2. You'll want to put the show/hide button outside of the box that you're hiding.
3. You can use cookies or sessions or Local Storage to store information that needs to persist across page loads. You'll need to set the initial state of the box to shown/hidden when the page loads.

Answer 6

How to Hide & show tag using Jquery & java script

<script>
 $(document).ready(function () {
     $("#purchase_order").click(function () {
         $(".salep").hide();
         $(".saleo").show();
         $("#purchase_order").hide();
         $("#sale_order").show();
  }); 
</script>