jQuery UI Widgets › Forums › Navigation › Expander › jqxexpander content hidden as default on form load
Tagged: collapsed, expander, fluid size, jqxExpander
This topic contains 6 replies, has 2 voices, and was last updated by vishakh.v.p. 10 years, 3 months ago.
-
Author
-
Hi there,
Is it possible to keep in jqxexpander content hidden as default on form load ? I am finding it difficult.
Thanks in advance.
Hello vishakh.v.p.,
Here is an example which shows how to load collapsed expander by default: http://jsfiddle.net/jqwidgets/N2EuL/.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/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.
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,
NadezhdajQWidgets team
http://www.jqwidgets.com/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.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,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Thanks buddy,it is working. -
AuthorPosts
You must be logged in to reply to this topic.