javascript - Text box changes accordion display -

i'm new web development , i'm attempting change accordion active when text entered within textbox. i'm trying make content within accordion required when text entered.

here have far:

//when text box edited  $("#hardware").on("keyup", function () {      if ($(this).val().length > 0) {          //also needing fields become required here?            //displaying accordion          $("#accordion").accordion({              active: true          });            //displaying accordion      } else {          $("#accordion").accordion({              active: false          });      }  });    //functionality of accordian  $(function () {      $("#accordion").accordion({          active: false,          collapsible: true,          autoheight: false,          navigation: true      });    });

hardware needed:  <br />&nbsp;  <textarea name="hardware" cols="70" rows="5" maxlength="100" id="hardware"></textarea>  <div id="accordion">       <h3>account distribution</h3>        <div><font color="##000" , size="-8">dept.          <input type="text" name="hardwaredistdept" size="3" />&nbsp;bus unit          <input type="text" name="hardwaredistbus" size="6" />&nbsp;account          <input type="text" name="hardwaredistaccount" size="6" />&nbsp;op unit          <input type="text" name="hardwaredistunit" size="6" />&nbsp;project          <input type="text" name="hardwaredistproject" size="6" />&nbsp;work id          <input type="text" name="hardwaredistid" size="6" />&nbsp;resource          <input type="text" name="hardwaredistresource" size="6" />          </font>        </div>  </div>

here in fiddle demo

according thought process accordion should expand on text input. it's not... can point me in right direction?

you need re-write calls slightly, this:

$("#hardware").on("keyup", function () {     if ( $(this).val().length > 0 ) {         $( "#accordion" ).accordion( "option", "active", 0 );     } else {         $( "#accordion" ).accordion( "option", "active", false );     } }); 

see updated demo

writing this:

$("#accordion").accordion({     active: true }); 

is initializing accordion widget again. proper way set options on jquery ui widget, after has been initialized calling it's internal option function, so:

$(selector).widget( "option", "optionname", otionvalue ); 

and it,

$(selector).widget( "option", "optionname"); 

take @ accordion option-active docs