Home/ Questions/Q 7587751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T19:45:06+00:00

I am sorry about how simple this question might be, but I cannot find

  • 0

I am sorry about how simple this question might be, but I cannot find the information I am looking for. I have two divs on my page and they are controlled by some jQuery that will open and close them. When the page loads they are both defaulted to close. I was wondering how I would make one default to open (loginDiv) when the page loads or does a post back? I am very novice at jQuery and the person that helped me this far is not an option right now. Thanks in advance!

Here is the code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
    // <![CDATA[

    (function($) {
        var containers = ['login', 'account'];

        var toggle = function(container, flag) {
            span = $('#' + container + 'Link').find('span');
            div = $('#' + container + 'Div');

            div[flag ? 'slideDown' : 'slideUp']();
            span.html(flag ? '-' : '+');
        };

        var clickHandler = function() {
            container = this.id.match(/^[a-z]*/);
            flag = $(this).find('span').html() == '+';
            toggle(container, flag);

            if (flag) {
                for (i = 0, j = containers.length; i < j; i++) {
                    con = containers[i];


                    if (con != container)
                        toggle(con, 0);
                }
            }
        };

        $(function() { // on load

            for (i = 0, j = containers.length; i < j; i++)
                $('#' + containers[i] + 'Link').click(clickHandler);

        });

    })(jQuery);

    //]]>
</script>

//And here are the divs:
<div id="loginDiv" style="display:none">...</div>
<div id="accountDiv" style="display: none;">...</div>

I tried changing the display on the loginDiv to anything but none, and it still does not work properly.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do something like this:

    http://jsfiddle.net/ufomammut66/Em64X/

    Basically the page intializes with the elements not displayed. When the page loads (thats the $function(){ bit) we set the login elements css value 'display' as block. and bam – we have a visible element on page load.

    I also included a quick little toggle button there for displaying only one at a time. I’m not 100% sure what you’re trying to do there but it looks like you’re trying to find all one one element – add a click event to it to do stuff. This one just does a slide toggle on anything with the class ‘hideAble’ which both or divs there do have.

    Hope this helps.

    EDIT: Added changing of span’s text on load.

    • 0