How to expand popover height with a click

Question

I have an input for password and when the user focus the input, it shows a popover describing some things. And inside, at the bottom I have a link. I want the popover expands when the user clicks in this link.

I tried to add a class with !important in the height value; I tried to change the height with .css(); I tried to change the height of ALL elements inside the popover and still not working.

Any ideas?

The HTML:

<input type="password" id="password" class="form-control inputSk" placeholder="Password" name="password" data-toggle="popover" data-placement="right" data-content="<div class='skPopover'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> <a href='#'>Why?</a><div id='more-content' class='hide'>More content here</div></div>" required>

The JS:

$('.skPopover a').on('click', function (e){
    e.preventDefault();
    $('#more-content').removeClass('hide');
});

I tried this too:

$('.skPopover a').on('click', function (e){
    e.preventDefault();
    $('.skPopover').css('height', 290);
});

And this:

$('.skPopover a').on('click', function (e){
    e.preventDefault();
    $('.skPopover').addClass('long-popover');
});

The class long-popover have 290px of height.

Answer 1

I found an answer. I put one of that solutions inside the event shown of the popover.

$('.form-group').on('shown.bs.popover', function (){
    $('.skPopover a').on('click', function (e){
        e.preventDefault;
        $('.skPopover').toggleClass('long-popover');
    });
});

Hope this helps someone with the same issue.