jQuery UI Widgets Forums Navigation Expander jqxexpander content hidden as default on form load

This topic contains 6 replies, has 2 voices, and was last updated by  vishakh.v.p. 5 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • vishakh.v.p.
    Participant

    Hi there,

    Is it possible to keep in jqxexpander content hidden as default on form load ? I am finding it difficult.

    Thanks in advance.


    Nadezhda
    Participant

    Hello vishakh.v.p.,

    Here is an example which shows how to load collapsed expander by default: http://jsfiddle.net/jqwidgets/N2EuL/.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    vishakh.v.p.
    Participant

    Hi Nadezhda,
    Thanks.But now i had an another issue.Is it possible to put width and height in percentage.I tried,when am putting it in percentage it is not working but when I keep it in px it works.Am using multiple expanders in same page.Am attaching my code along with this.Please give a solution.

    <html>
    <head>
    <script type=”text/javascript”>
    $(“#jqxExpander”).jqxExpander({width: ‘100%’,height: ‘50%’,theme: ‘energyblue’,expanded: false });

    $(“#jqxExpander1”).jqxExpander({width: ‘100%’,height: ‘50%’,theme: ‘energyblue’,expanded: false });

    </script>
    </head>
    <body>
    <div id=’jqxExpander’>
    <div>Overview</div>
    <div>More</div>
    </div>

    <div id=’jqxExpander1′>
    <div>Header</div>
    <div>Content</div>
    </div>
    </body>
    </html>

    Thanks in advance.


    Nadezhda
    Participant

    Hello vishakh.v.p.,

    Please, find below an example which shows how to expand the collapsed expanders when their width and height are in percentage. The container where is placed the expander is set to auto width and height so you have to set it in percentage.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
        <style>
            body, html {
                width: 100%;
                height: 100%;
                overflow: hidden;
                padding: 0;
                margin: 0;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxExpander
                $("#jqxExpander").jqxExpander({ width: '40%', height: '30%', theme: 'energyblue', expanded: false });
                $("#jqxExpander1").jqxExpander({ width: '40%', height: '30%', theme: 'energyblue', expanded: false });
    
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxExpander">
            <div>Overview</div>
            <div>More</div>
        </div>
        <div id="jqxExpander1">
            <div>Header</div>
            <div>Content</div>
        </div>    
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    vishakh.v.p.
    Participant

    Hi Nadezhda,
    Thanks.That is fine but what i wanted is : when the multiple expanders get collapsed,the space in between the expanders should be collapsed along with them.i.e.By default there won’t be any space in between the two expanders.Please give a solution.


    Nadezhda
    Participant

    Hi vishakh.v.p.,

    If you want to take out the space between the expanders you can initialize expanders only with width in percentage(by default height is ‘auto’).

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    vishakh.v.p.
    Participant

    Hi Nadezhda,
    Thanks buddy,it is working.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.