CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
BaconJuice
BaconJuice

Reputation: 3779

How to hide Bootstrap textbox toggle on load

I have a couple of dynamically created buttons with toggle boxes below it that are created like so.

HTML

<button type="button" class="accordion-toggle btn btn-default btn-small" 
data-toggle="collapse" data-parent="#accordion'+this.id+'" 
href="#collapseOne'+this.id+'"><i class="icon-info"></i></button>

Here is the textbox collapse it calls to display on click

<div id="accordion'+this.id+'">
    <div id="collapseOne'+this.id+'" class="collapse" style="height: auto;">
        <div class="control-group control-group-notes">
            <button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
            <textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
        </div>
    </div>
</div>

The button and boxes are dynamically created and works fine. The only issue I can't seem to figure out is that on load all the boxes are open and not hidden. But once I click the x button it toggles to hide just fine.

Could anyone help me out? Thank you in advance.

Upvotes: 0

Views: 2412

Answers (3)

BaconJuice
BaconJuice

Reputation: 3779

Solved!

If anyone wants to the know what was causing it.

As stated above in class needed to be removed. also there was a height auto that needed be removed.

code as follows.

<div id="accordion'+this.id+'">
    <div id="collapseOne'+this.id+'" class="collapse">
        <div class="control-group control-group-notes">
            <button onclick="clearMsgBox(\''+this.id+'\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion'+this.id+'" href="#collapseOne'+this.id+'">x</button>
            <textarea id="doGet'+this.id+'" style="width: 92%;" rows="2" placeholder="Message..."></textarea>
        </div>
    </div>
</div>

Upvotes: 1

DivineChef
DivineChef

Reputation: 1221

In bootstrap the class="in" determines the visibility of your accordion and it's probably present on all of them when it loads.

class="panel-collapse collapse in"

For those you do not want to show onload remove the "in" class.

Upvotes: 2

crushtc
crushtc

Reputation: 1

If you want your div to be hidden on load, you can try to set: "display:hidden;" in your CSS for this div. Then the toggle function will show it on click by changing the display attribute. (at least this is how it works with jquery)

Upvotes: 0

Related Questions