CODEWITHSUNDEEP
angularjstwitter-bootstraptwitter-bootstrap-3
User
User

Reputation: 383

How to add plus minus symbol to a bootstrap accordion along with angularjs

I am using bootstrap accordion in angular js. The panels are opening If I click on the heading directly but I need to add plus/minus symbols for each heading. Please help me out in achieving the functionality like If I click plus icon, panel should be open and If I click on minus symbol, the panel should be closed. Thanks in advance.

Sorry, I Cannot able to add fiddle or plunker as the data is coming from my local database.

 <uib-accordion close-others="oneAtATime" class="accordion-data">
            <uib-accordion-group heading="title from database" ng-repeat="values are coming from database">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row row-head">
                            <div class="col-md-6 col-xs-6">
                            </div>
                        </div>
                        <div class="row item-head accordion-content" ng-repeat="values are coming from database">
                            <div class="col-md-4 col-xs-4"><input type="checkbox" ng-model="check" >data from database
                            </div>
                            <div class="col-md-8 col-xs-8 service-data">
                                <div class="row">
                                    <div class="col-md-2 col-xs-2"></div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="number" class="form-data" ng-disabled="!check">
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="number" name="times" class="form-data" ng-disabled="!check">

                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uib-accordion-group>
        </uib-accordion>

Upvotes: 0

Views: 3566

Answers (2)

sjokkogutten
sjokkogutten

Reputation: 2095

glyphicon glyphicon-plusIf you want to handle this in javascript, you could use the collapse event described here.

shown.bs.collapse will fire when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hidden.bs.collapse will fire when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

$('#yourCollapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon glyphicon-minus").addClass("glyphicon glyphicon-plus");
});

$('#yourCollapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon glyphicon-plus").addClass("glyphicon glyphicon-minus");
});

It uses glyphicons to display the + and -

Upvotes: 0

julian soro
julian soro

Reputation: 5238

I don't know the specifics about your implementation, but you could make use of the CSS :before pseudo-element like I have done in this simple fiddle.

If you have a way of selecting the accordion header by the open/closed state, then you can do something similar to this:

.accordion li.open:before {
  content: '- ';
}
.accordion li.closed:before {
  content: '+ ';
}

Upvotes: 1

Related Questions