Текстовое поле сменяет аккордеонный дисплей

Question

Я новичок в веб-разработке, и я пытаюсь изменить аккордеон на активный, когда текст вводится в текстовое поле. Я также пытаюсь сделать контент в пределах аккордеона, необходимый при вводе текста.

Вот то, что я до сих пор:

//when text box is edited 
 
$("#hardware").on("keyup", function() { 
 
    if ($(this).val().length > 0) { 
 
     //Also needing fields to 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>

здесь в скрипке Demo

По моему мыслительному процессу аккордеон должен расширяться на вводе текста. Но это не ... может ли кто-нибудь указать мне в правильном направлении?

Answer 1

Вам просто нужно переписать вызовы немного, как это:

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

See this updated demo

Дать это следующим образом:

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

фактически инициализации аккордеона виджет снова. Надлежащим образом, чтобы установить параметры на виджет JQuery UI, после его инициализации является вызовом его внутренней option функции, например, так:

$(selector).widget("option", "optionName", otionValue); 

И чтобы получить его,

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

Берут Посмотрите на Accordion Option-Active Docs

Answer 2

Мы указали только указатели на активную недвижимость в Аккордеоне.

$("#hardware").on("keyup", function() { 
    var isActive = ($(this).val().length > 0) ? 0 : false; 
    $("#accordion").accordion({ 
     active : isActive, 
     collapsible: true 
    }); 
}); 

Fiddle

For Study More