How to create an action which closes all popovers?

Question

How to create an action which closes all popovers? For example I click one of the popovers and it opens as well . Then I click another popover and it opens as well, but previous popover closes. This action have to works for all popovers.

<ul>            
<li>                      
<a class="alerts-menu" data-toggle="popover" data placement="bottom">Notifications</a>
<div id="alerts-popover-content" style="display:none">FIRST CONTENT</div>
</li>

<li>                      
<a class="tasks-menu" data-toggle="popover" data-placement="bottom">Tasks</a>                   
<div id="tasks_popover_content" style="display:none">SECOND CONTENT</div>
</li>

</ul>



    $(function(){

        $('[data-toggle=popover].alerts-menu').popover({ 
            html : true, 
            content: function() {
              return $('#alerts-popover-content').html();
            }
        }); 

        $('[data-toggle=popover].tasks-menu').popover({ 
            html : true, 
            content: function() {
              return $('#tasks_popover_content').html();
            }
        });
    }); 

PROBLEM SOLVED!!!! =) I DID IT!! I've never code js before :D Here is code

$(function () { 
$("[data-toggle=popover]").click(function() {
 var me = this;
 $("[data-toggle=popover] + .popover").each(function() {
  if (me != this)
   $(this).hide();
 });
})  });

I hope this will be helpful for you

Answer 1

Use this:

$('[data-toggle=popover]').hide()