ITWorker ITWorker - 2 months ago 7
HTML Question

How can I attach an event to the selection of Bootstrap collapsing panel?

In the following code, there is a Bootstrap collapsible panel with no list, so it doesn't expand or contract. How can I attach an event to the selection of this panel?



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel-group">
<div class="panel panel-default" id="leftsidemenu">


<div class="panel-heading" id="aboutcollapsepanel">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseabout" data-target="tabsabout" >About</a>
</h4>
</div>
<div id="collapseabout" class="panel-collapse collapse">

</div>



</div>
</div>





My non-working attempt is as follows:

$("#aboutcollapsepanel").on('show.bs.collapse', function () {
alert("collapse panel activated");
});

$("#aboutcollapsepanel").on('hide.bs.collapse', function () {
alert("collapse panel deactivated");
});


How can I get the data-target value of the panel, in this case
tabsabout
, which is a jQueryUI tab widget. My goal is to get this id and pass it on to a javascript function that makes it visible, and that function has the signature
function performListItemAction(item)
where
item
would be the value of the data-target from the panel I click.

Thank you.

Answer

Why not adding onClick?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function performListItemAction(item) {
alert(item);
}
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel-group">
            <div class="panel panel-default" id="leftsidemenu">


<div class="panel-heading" id="aboutcollapsepanel">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapseabout"  data-target="tabsabout" onClick="performListItemAction('tabsabout')">About</a>
                    </h4>
                </div>
                <div id="collapseabout" class="panel-collapse collapse">

                </div>



	     </div>
</div>

Comments