CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
ImmJaqo
ImmJaqo

Reputation: 1

How to Close and Open, one after the other on a div tag

Basically, I'm trying to easily refresh a collapsible div. Wherein when I want to change the data, I can run a script, that basically closes and opens the div if it is open, and simply opens the div if it is closed. My aim is to use something similar to this.

$("#procDiv").html("New Data");
if($("#procDiv").attr('class').contains("collapse in")) {
    $("#procDiv").collapse("close");
    $("#procDiv").collapse("open");
} else {
    $("#procDiv").collapse("open");
}

But I am having an issue as it doesn't open when I tell it to open which would be from what I would assume to be from the fact that it is in an animation and so it doesn't expect any new instructions.

HTML

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="inputAirport">Airport</label>
    <input type="text" class="form-control" id="inputAirport" placeholder="Airport">
  </div>
  <button class="btn btn-primary btn-sm btn-search">Search</button>
</form>

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#procDiv">Procedures</a>
        </h4>
    </div>
    <div id="procDiv" class="panel-collapse collapse"></div>
</div>

Upvotes: 0

Views: 72

Answers (1)

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

if($("#procDiv").hasClass("collapse in")) {
    $("#procDiv").slideDown();
} else {
    $("#procDiv").slideUp();
}

Try in this way.

By the way, there is syntax error on line 2 in your code. You missed double quote

Upvotes: 1

Related Questions