Bootstrap 4 Popover show/hide div

Question

Using Bootstrap 4, I have a popover set to display some HTML content. Inside the popover, I would like to show/hide a div with additional content using jQuery, but I can't get it to show the hidden content.

HTML

<div class="text-center">
    <button id="show-popover" type="button" class="btn btn-primary mt-5" data-toggle="popover">Click Me</button>
</div>
<!-- popover content -->
<div id="popover-content" class="d-none">
    <div class="card border-0">
        <div class="card-body">
            <a href="#" id="show-div">Show more content</a>
            <div id="hidden-content" class="d-none">
                div with more content...
            </div>
        </div>
    </div>
</div>

jQuery

$(function () {
    $('#show-popover').popover({
        container: 'body',
        html: true,
        placement: 'bottom',
        sanitize: false,
        content: function() {
            return $('#popover-content').html();
        }
    })
});

$('#show-div').click(function(){
    $('#hidden-content').toggle();
});

Link to CodePen

Answer 1

As you are appending i.e : $('#popover-content').html() content dynamically to popover so you need to bind your click handler to some static element and use class selector instead of id to get reference of hidden-content using $(this).parent().find('.hidden-content').toggle(); to hide and show same .

Demo Code :

$(function() {

  $('#show-popover').popover({
    container: 'body',
    html: true,
    placement: 'bottom',
    sanitize: false,
    content: function() {
      return $('#popover-content').html();
    }

  })

});


//call handler like below ..
$(document).on('click', '.card-body > #show-div', function() {
  //then use .find to get the div and then show/hide
  $(this).parent().find('.hidden-content').toggle();

});

.d-none {
  display: none
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<div class="text-center">

  <button id="show-popover" type="button" class="btn btn-primary mt-5" data-toggle="popover">Click Me</button>

</div>

<!-- popover content -->

<div id="popover-content" class="d-none">
  <div class="card border-0">
    <div class="card-body">
      <a href="#" id="show-div">Show more content</a>
      <div class="hidden-content d-none">
        div with more content...
      </div>
    </div>
  </div>
</div>