Why pinterest feed not working?

Question

This is my pinterest widget code:

<div id="pinterestFeed">
    <a data-pin-do="embedUser" href="https://www.pinterest.com/krish" 
         data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"> 
    </a>            
    <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
</div>

On page load pinterest feed div display is none. I have a click me tag, when i click on 'click me' the feed should be display. but it not work for me.

when i remove the css properties display none then it's works fine.

This is m jsfiddle link

Answer 1

Pinterest's script won't initialize the widget if container is hidden. You could make it 'almost hidden' until the script does the job this way:

Using HTML:

<h3 id="displayFeed">Click me</h3>
<div id="pinterestFeed" class="almost_hidden">
    <a data-pin-do="embedUser" href="https://www.pinterest.com/krish" data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"></a>
</div>

CSS:

.almost_hidden {
    opacity: .01;
    height: 0;
    overflow: hidden;
}

Than engage Script:

$('#pinterestFeed').hide().removeClass('almost_hidden');
$('#displayFeed').click(function () {
    $('#pinterestFeed').show();
});

I cannot make it work here, but you can check it on this Fiddle.