CODEWITHSUNDEEP
twitter-bootstrapaccordionpopover
yaylitzis
yaylitzis

Reputation: 5534

popover inside collapse Title with accordion style

I am using Twitter Bootstap theme and i have write this [code] which implements a Collapse in accordion style. In the title, I a have placed a star which is floated at the right. Now i want to popover a window when the user clicks on the star but without the content of the accordion to be hided or shown!

As i have coded, if the accordion content is open and i click the star, there is a popover but the accordion content is hided (and reverse).How can i disable this?

Upvotes: 1

Views: 780

Answers (1)

Trevor
Trevor

Reputation: 16116

Here is a solution I came up with.

$('#foo').popover({
   placement : 'right',
   content : 'some text'
});

$('#foo').click(function(){
   var myLink = $(this).parent().attr('href');
  var el = $(this).parent();
 el.attr('href','');
 setTimeout(function(){el.attr('href',myLink);},100)
});

What i'm doing here is when the star is clicked i'm disabling the Accordion link for 100 milliseconds before I re-enable it. Ideally you would want to disable the accordion and then enable it once the popover is shown or closed. But I could not find a way to check for those events.

However I worked with this code for a while and it seemed to work great. I could not find any issues. Good luck.

Update

Okay so to stop the accordion from moving when the popover was clicked. I am listening for a click on the popover and if the popover is clicked then i'm doing the same thing as before disabling the accordion for 100 milliseconds. Cheers.

$('#foo').popover({
   placement : 'right',
   content : 'some text'
});

$('#foo').click(function(){
   var myLink = $(this).parent().attr('href');
   var el = $(this).parent();
   el.attr('href','');
   setTimeout(function(){el.attr('href',myLink);},100);
});

$(document).ready(function(){
   $('#accordion2').on('click', '.popover', function() {
       var myLink = $(this).parent().attr('href');
       var el = $(this).parent();
       el.attr('href','');
       setTimeout(function(){el.attr('href',myLink);},100);
  });
});

Upvotes: 1

Related Questions