How do I set jquery toggle OFF on page load?

Question

Greetings I have the following javascript controlling some DOM elements on my page to toggle on/off to hide the elements and save real estate on the page ... I have a gridview at the bottom of the page, and when I perform operations on the gridView, my page reloads and the toggle is reset.

   // Toggle Dealer Information on/off
    $("#mlldlr").click(function () {
        $("#DealerContainer").toggle();
        $("#ShowHideDI").toggle();
        if ($("#morelessDi").text() === ("...show less"))
            $("#morelessDi").text("...show more");
        else
            $("#morelessDi").text("...show less");

The problem is ... if I toggle off and I reload the page for whatever reason, the toggle is reset to on, meaning the items show. I want them to remain closed until I initiate their reopening. Is there any way to do this?

could you make it display: none; and onClick set display: block? — display name, Jan 29 '15 at 20:57
I tried, but and that works, but that just creates a blank space on my page, where the hidden information would normally be, but thank you for your assistance. — Paul T. Rykiel, Jan 29 '15 at 20:59
Hv u tried something like $('selector').off('toggle') inside `document-ready` ? — Tushar Raj, Jan 29 '15 at 21:20

score 2 · Answer 1 · answered Jan 29 '15 at 21:19

JavaScript doesn't store state between page reloads by default. If you want to persist the state, you'll need to store that information some where. localStorage might be the right solution. Here's a simple example of how localStorage can keep a css state after reloading: http://jsfiddle.net/kweqaofv/2/

score 1 · Answer 2 · answered Jan 29 '15 at 21:09

1

Put this below the tag.

    <script type="text/javascript">
        $(document).ready(function ()
        {
          $("#DealerContainer").hide();
          $("#ShowHideDI").hide();
        });
    </script>

answered Jan 29 '15 at 21:09

Ryan

97
4

Thank you Ryan ... this works but even though it does hide the content, the space where the content is still present, where .toggle actually saves space. – Paul T. Rykiel Jan 30 '15 at 16:26
That sounds more like a CSS problem than a jQuery issue. Can you post the CSS? – Ryan Jan 30 '15 at 20:23

score 1 · Answer 3 · answered Mar 13 '20 at 05:12

Other than using the COOKIE or The hide();

Follow the simple 1 line code:

$("element").toggle(100);

#element is the element of which you want to turn off the toggle on page loads

Just insert this line at first and then, Toggle your element, like a sliding dailog or Navigation panel!

Hope it helps!

score 0 · Answer 4 · edited May 23 '17 at 12:24

The fact that the page is reloaded is making the DOM to reset to its initial state, thus resetting the toggle.

The only way I think this can be done is to have a parameter that would not be changed on page reload.

I have three suggestions:

1- You can set a cookie in your browser with the value of the toggle (on/off) and when the page loads, ask for this value and set the toggle. This can be done with jquery (follow this link for more info How do I set/unset cookie with jQuery?):

To set a cookie:

$.cookie("test", 1);

To delete it:

$.removeCookie("test");

2- The other option is to save this parameter on the server side. I'm guessing that if the page is reloading is because you are making a request to the server?

If this is the case, you could send the state of the toggle to the server, do your query, and on the response get the state of the toggle back. In the callback function you would then set the proper toggle state.

3- Another way could be using a JFrame for the grid, making the grid the only item of the page to reload.

Hope this helps

wow ... thanks for the good advice, i will try this ... everything else works great, but I really want to make certain that the user experience isn't compromised. — Paul T. Rykiel, Jan 29 '15 at 22:50

Thato Sello · Answer 5 · 2016-04-10T13:43:03.547

I had a similar problem with one that is as simple as

Jquery

   $(document).ready(function() {
   $('nav a').click(function() {
    $('p').toggle('slow');
      });
   });

with regards to toggle being switched "on" upon page load. All I did on this on was inline text the html with style="display :none;".This switches off the 'p' tag upon load and thus the user can switch it "on" any time after that.

So that is

HTML

<nav style="padding-top: 1cm; padding-bottom:1cm;">
        <ul>
          <li style="padding-bottom: .2cm;">
            <a  class="popup"  style="padding-bottom: .2cm;cursor : pointer;"><b>Send</b></a>
          </li>
          <p style ="display: none;">your cat a litter box.
          </p>
        </ul>
 </nav>

Bear in mind that the 'p' takes no space upon page load. Hope I shed some light.

How do I set jquery toggle OFF on page load?

5 Answers5