CODEWITHSUNDEEP
jqueryangulartypescript
Hothi Jimit
Hothi Jimit

Reputation: 365

Typescript - Expanding and Collapsing a bootstrap accordion

using typescript How to expand and collapse bootstrap panel try below code but no success. I want open in typescript.

Code-1

<div class="panel panel-white">
    <div class="panel-heading removeColor" id="passins_heading">
            <h6 class="panel-title">
                <button class="collapsed" id="openPassion" data-toggle="collapse" data-target="#Passions" >Click Here</button>
            </h6>           
    </div>

    <div id="Passions" class="panel-collapse collapse">
        <div class="panel-body">                

                    Content -1              
        </div>
    </div>
</div>

Cord-2

<div class="panel panel-white">
        <div class="panel-heading removeColor" id="passins_heading">
                <h6 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" href="#Passions"> Click Here </a>
                </h6>           
        </div>

        <div id="Passions" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="form-group">

                        Content -1                                              

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

jquery:

import * as JQuery from 'jquery';


setTimeout(() => {
                JQuery( '#openPassion' ).toggle();
            }, 5000 );

how Expanding and Collapsing in a component?

Upvotes: 1

Views: 4016

Answers (1)

ForestG
ForestG

Reputation: 18123

A possible solution can be something like this:

First, create a reference on your button: <button #myButton ...

Then in your code, you can use the ViewChild decorator to find it:

  @ViewChild('myButton')
  private myButtonRef: ElementRef;

and then, you can "click" it in the control class:

setTimeout(() => {
            this.myButtonRef.nativeElement.click();
        }, 1000 );  }

Working plunker here.

Upvotes: 3

Related Questions