0

I'm looking to create a popover which has multiple pages to it (different content materials) that update when clicking on the popover. The idea is that you toggle the popover and "page1" content loads, clicking on it will load "page2" content.

var $btn = $("#myButton");

$("html").click(function(){
    $btn.popover('hide');
});

$btn.popover({title: "Popover", html: "true", trigger: "manual", placement: "top", content: "<div id='page1'>Page 1</div>"}).click(function(e) {
$btn.popover('toggle');
e.stopPropagation();
});

How can I do something along the lines of this:

$("#page1").click(function() {
    $btn.popover.options.content = 'Page 2';
});

while incorporating the functionality of closing the popover whenever anything else is clicked, such as in this answer?

Community
  • 1
  • 1
adapap
  • 137
  • 1
  • 1
  • 5

2 Answers2

1

Use .html to change the content and hide the popup when anything other than #page1 is clicked.

$('body').on('click', '#page1', function(e){
    $(this).html('Page 2');
    e.stopPropagation();
});

$("html").on('click', ':not("#page1")',function(){
    $btn.popover('hide');
});

Fiddle

Derek
  • 3,438
  • 1
  • 17
  • 35
0

I would change your trigger to 'focus' which closes the popover if you click outside the box and add all your content as tabbed content.

dg4220
  • 359
  • 1
  • 8