jQWidgets Forums

June 3, 2014 at 6:18 am Button onClick Collapse or Expand Top Pane #55244

Participant

HAH! Works every time! Any time I’m stuck on a bit of code all it seems to take to shake it loose in my head is to ask for help. Came back to post a “never mind…duh!” and you’d already responded. You guys are great!

I resorted to logic I already knew from my server-side days and tried the “on click” logic applied to a toggle button. Logically it seemed like it should work and it does! Bit cleaner and I didn’t have to figure out how to save state….. although I REALLY appreciate the code and am sure I’ll need it in the future! THANK YOU!!!!

	 <!DOCTYPE html>
<html lang="en">
    <head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This demonstration shows how to use the jqxSplitter API." />
    <title id='Description'>This demonstration shows how to use the jqxSplitter API.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
       var panels = [{size: 100}, {size: 740, collapsible: false}];
       $('#mainSplitter').jqxSplitter({ height: 600, width: 850, panels: panels, orientation: 'horizontal', showSplitBar: false });
       $("#jqxButton").jqxToggleButton({ width: '200', toggled: true});
       $("#jqxButton").on('click', function () {
          var toggled = $("#jqxButton").jqxToggleButton('toggled');
          if (toggled) {
             $('#mainSplitter').jqxSplitter('expand');
          }
          else {
	     $('#mainSplitter').jqxSplitter('collapse');
	  }
       });
    });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
      <div id="container" >
        <div id="mainSplitter">
          <div style="background-color:#F5FFF2;"></div>
          <div style="background-color:#EBF1FF;">
            <input style='margin-left: 25px;' type="button" value="Toggled On" id='jqxButton' />
          </div>
        </div>
      </div>
    </div>
</body>
</html>