Bootstrap Accordion inside Popover

Question

I have tried and tried to figure out how to get an accordion to work while inside a popover. I can't seem to figure it out. the sample accordion works when not inside a popover just fine. I have added some sample code below. Any help is appreciated.

<div class="hidden-md hidden-lg" style="float: right; padding: 15px 0px 15px 15px;">
<a data-placement="bottom" data-toggle="popover" data-container="body" type="button" data-html="true" href="#"><i class="fa fa-chevron-right"></i> FILTERED BY</a>


    <div id="popover-content" class="hide">

        <div class="panel-group" id="accordion">
            <!-- accordion 1 -->
            <div class="panel panel-primary">

                <div class="panel-heading">
                    <!-- panel-heading -->
                    <h4 class="panel-title">
                        <!-- title 1 -->
                        <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
                            Collapsible Accordion 1
                        </a>
                    </h4>
                </div>
                <!-- panel body -->
                <div id="accordionOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat
                    </div>
                </div>
            </div>

            <div class="panel panel-success">
                <!-- accordion 2 -->

                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!-- title 2 -->
                        <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
                            Collapsible Accordion 2
                        </a>
                    </h4>
                </div>
                <!-- panel body -->
                <div id="accordionTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        Change does not roll in on the wheels of inevitability,
                        but comes through continuous struggle.
                        And so we must straighten our backs and work for
                        our freedom. A man can't ride you unless your back is bent.
                    </div>
                </div>

            </div>

            <div class="panel panel-warning">
                <!-- accordion 3 -->

                <div class="panel-heading">
                    <h4 class="panel-title">
                        <!-- title 3 -->
                        <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
                            Collapsible Accordion 3
                        </a>
                    </h4>
                </div>

                <div id="accordionThree" class="panel-collapse collapse">
                    <!-- panel body -->
                    <div class="panel-body">
                        You must take personal responsibility.
                        You cannot change the circumstances,
                        the seasons, or the wind, but you can change yourself.
                        That is something you have charge of.
                    </div>

                </div>

            </div>

        </div>

    <script type="text/javascript">
        $("[data-toggle=popover]").popover({
            html: true,
            content: function() {
                var clone = $('#popover-content').clone(true).html();
                return clone;
            }
        });
    </script>

</div>

<div style="border-top: solid 1px #aaaaaa; clear: both;" class="hidden-md hidden-lg"><br/><br/>
</div>
</div>

Answer 1

Here is a demo for you

You might have to change some css though but you will get the idea.

Here is html code of that

<div class="container-fluid">
  <div class="row-fluid" style="margin-top:200px">
    <div class="span12" style="float: middle; margin: 15px 0px 15px 15px;">
   <a href="#" id="popoverExampleTwo">Popover Example 2</a>


      <div id="popoverExampleTwoHiddenContent" style="display: none">
         <div class="panel-group" id="accordion">
        <!-- accordion 1 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <!-- panel-heading -->
                 <h4 class="panel-title">
                    <!-- title 1 -->
                    <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
                        Collapsible Accordion 1
                    </a>
                </h4>

            </div>
            <!-- panel body -->
            <div id="accordionOne" class="panel-collapse collapse in">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
            </div>
        </div>
        <div class="panel panel-success">
            <!-- accordion 2 -->
            <div class="panel-heading">
                 <h4 class="panel-title">
                    <!-- title 2 -->
                    <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
                        Collapsible Accordion 2
                    </a>
                </h4>

            </div>
            <!-- panel body -->
            <div id="accordionTwo" class="panel-collapse collapse">
                <div class="panel-body">Change does not roll in on the wheels of inevitability, but comes through continuous struggle. And so we must straighten our backs and work for our freedom. A man can't ride you unless your back is bent.</div>
            </div>
        </div>
        <div class="panel panel-warning">
            <!-- accordion 3 -->
            <div class="panel-heading">
                 <h4 class="panel-title">
                    <!-- title 3 -->
                    <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
                        Collapsible Accordion 3
                    </a>
                </h4>

            </div>
            <div id="accordionThree" class="panel-collapse collapse">
                <!-- panel body -->
                <div class="panel-body">You must take personal responsibility. You cannot change the circumstances, the seasons, or the wind, but you can change yourself. That is something you have charge of.</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $("[data-toggle=popover]").popover({
            html: true,
            content: function() {
                var clone = $('#popover-content').clone(true).html();
                return clone;
            }
        });
    </script>
</div>

      </div> 
      <div id="popoverExampleTwoHiddenTitle" style="display: none">
         Popover Example <b>2</b> - Title
      </div>  

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

And a little script to set title and content in popover body

$(function(){

// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();

// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#popoverExampleTwo").popover({
    html : true, 
    content: function() {
      return $('#popoverExampleTwoHiddenContent').html();
    },
    title: function() {
      return $('#popoverExampleTwoHiddenTitle').html();
    }
  });

});

What i did was just handle the popover content via javascript as well,and i am not so good at explaining but you will understand looking at the demo.

Hope that answers the question