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.

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

Solution 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')) {
   
       }
   
   });
   

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

Comments

[Peter Olson]

Isn't that more complicated than it needs to be?

[Rich Bradshaw]

Using is visible won't work if he wants to animate to a certain height to keep the button visible – but yeah, it's probably not the best ever way!

[Mohit Kotak]

'#' is indicate id '.' indicate class

[Mohit Kotak]

So you can adjust ur div in class & button in id