How to create additional accordion ( collapse )

Question

1)I have an input . 2)Have collapse ( accordion ) block.

Me skills in js very low. Can anyone help me?

Accordion must appears when in input something typed ( for examlpe ) 10 symbols.

<input type="text" placeholder="your question">

<!-- This block must appears -->
        <div class="advanced-search" id="accordion">
            <div class="panel panel-default">         
            <div class="p-heading">
                <h4 class="title-panel panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                     <!-- no title cuz action must appear this block --> <b class="caret"></b>
                </a>
                </h4>
            </div>      
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">              
                <div class="ct-row ct-col-two">
                    <span class="col-1"><div class="ct-star">*</div><div class="ct-title">what job?</div></span>
                    <span class="col-2">
                        <div class="btn-group-horizontal">
                            <div class="ck-button left">
                                <label >
                                    <input type="checkbox" value="1"><span class="left">1</span>                                        
                                </label>                        
                            </div>          
                        </div>
                    </span>
                </div>      
                </div>
            </div>          
            </div>
        </div>

Answer 1

You'll need both jquery and bootstrap. Simply enable the accordion effect with:

$('.collapse').collapse()

UPDATE

This javascript will auto-update the panel-title with the input text

$(document).ready(function(){
    $('#question').change(function(){
        var text = $(this).val()
        console.log(text)
        $('#collapseOne').collapse({
            toggle: true
        })
        $('#title').append(text)
    })
})

http://jsfiddle.net/2RV7T/1/