Bootstrap popover on moving elements

Question

I am trying to use a static popover on an element whose position may change by accordion. However the popover stays at the same place when accordion is activated. How can I enable popover to change its position accordingly ?

Here is the related code:

(on JsFiddle: http://jsfiddle.net/gordianknot/VLmNM/1/ you may click any section for instance)

HTML:

    <h3><a href="#">Section 1</a></h3>
    <div><p>Section 1 Content</p></div>

    <h3><a href="#">Section 2</a></h3>
    <div><p>Section 2 Content</p></div>

    </div>
    <br/>
    <a id="example" name="example" href="#" class="btn btn-danger">Example Button</a>

JS:

    $(function() {
        $("#accordion").accordion({ 
           collapsible: true, 
            autoHeight: false, 
            active: false 

        });

        $("#example").popover({
         trigger:'manual',
         placement: 'right',
         html: 'true',
         title : 'Test',
         content : 'Hello !',

        });

        $('#example').popover('show');
    });

Answer 1

Perhaps it's not the most elegant solution, but it will do:

JQuery:

var hasMoved = false;
    $('#accordion').click(function () {
        if ($('#accordion').children('h3').hasClass('ui-state-active')) {


            if(!hasMoved) {
            $('.popover').animate({
                top: "+=60"
            }, 250);
              hasMoved = true;  
            }
        } else {
            $('.popover').animate({
                top: "-=60"
            } , 250);
            hasMoved = false; 
        }
    });

});

DEMO