Question

i am using bootstrap and collapse on a form- allowing users to add in certain fields as required. But i have discovered if i hit the keyboard button tab to jump to the next field it will tab across to the collapsed/hidden field.

Anyway around this? i have included some code below

            <div class="control-group">
                <label class="control-label" for="title">Title</label>
                <div class="controls">
                    <input type="text" name="title" id="title" class="input-xlarge" placeholder="Title">
                </div>
            </div>

            <hr />

            <div class="control-group">
                                    <div class="controls">
                     <a data-toggle="collapse" data-target="#add_date_div">
                        Add A Date
                    </a>
                                        </div>
            </div>

            <div id="add_date_div" class="collapse">


                <div class="control-group">
                    <label class="control-label" for="start_date">
                            Start Date:

                    </label>
                    <div class="controls">
                        <div id="collapse_date" class="input-append date form_datetime" data-date="2013-09-16T05:25:07Z" data-date-format="dd MM yyyy - hh:ii" data-link-field="dtp_input1" >
                            <input name="start_date" type="text" value="" readonly><span class="add-on"><i class="icon-th"></i></span>

                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="end_date">
                        End Date:1
                    </label>
                    <div class="controls">
                        <div id="collapse_date" class="input-append date form_datetime" data-date="2013-09-16T05:25:07Z" data-date-format="dd MM yyyy - hh:ii" data-link-field="dtp_input1" >

                            <input name="end_date" type="text" value="" readonly><span class="add-on"><i class="icon-th"></i></span>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

Its because the collapsed part is not actually hidden. Its a height-overflow hack. So add this to your CSS file. Remove collapse code. (i.e. data-toggle and data-target attributes from link and class=”collapse” from #add_date_div) and add custom jquery code and CSS as below:

#add_date_div {
    display:none;
}

$(function(){
    $(".add_a_date").on("click",function() {
        $("#add_date_div").slideToggle();
    });
});

Working Fiddle