How to display help icon on accordion main panel

Question

I created an accordion that when I expand displays minus(-) and when I collapse it, it displays plus(+).

Now I want to add a help icon in the accordion main panel. Once I click the help icon it should display one pop-up (without expanding or collapsing the accordion after the click on the icon).

Is it possible to do? How? I'm using bootstrap and jQuery.

<div class="panel-group" id="parent_accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#parent_accordion" href="#collapseONE">
               Accordion main panel
            </a>

        </h4>
    </div><!--/.panel-heading -->
    <div id="collapseONE" class="panel-collapse collapse in">
        <div class="panel-body">
             Welocme Here            
        </div><!--/.panel-body -->
    </div><!--/.panel-collapse -->
</div><!-- /.panel -->

Answer 1

Just add a glyphicon (i suggest glyphicon-info-sign for a help button, but it's your choice) to your accordion:

<span class="pull-right glyphicon glyphicon-info-sign" 
      data-toggle="popover" 
      title="Popover Header" 
      data-placement="left" 
      data-content="Some content inside the popover"></span>

and place it with the class pull-right on the right side. Then you add data-toggle="popover" to use bootstrap popover, place it on the left side with data-placement="left" and fill it with content: data-title and data-content.

You have to activate the popover with this javascript:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

Here is your full HTML:

<div class="panel-group" id="parent_accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#parent_accordion" href="#collapseONE">
               Accordion main panel
            </a>
            <span class="pull-right glyphicon glyphicon-info-sign" data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover"></span>
        </h4>
    </div><!--/.panel-heading -->
    <div id="collapseONE" class="panel-collapse collapse in">
        <div class="panel-body">
             Welocme Here            
        </div><!--/.panel-body -->
    </div><!--/.panel-collapse -->
</div><!-- /.panel -->

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>