CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraphaml
user592638
user592638

Reputation:

show one popover hide others bootstrap

I have several images with unique popover. When a user click on one of them, I want the others to be hidden and only one is shown.

This what I have done so far. I have no ide on how to hide other popovers when one is active, thats what I need help with.

HTML/HAML:

%ul
  %li
    = image_tag 'robert-reco.jpg', class: "active ", id: "recorobert"
  %li
    = image_tag 'anan-reco.jpg', id: "recoanna" 
  %li
    = image_tag 'christian-reco.jpg', id: "recochristian"
  %li
    = image_tag 'hanjun-reco.jpg', id: "recohanjun"

Jquery code:

//popover homepage
    $('#recorobert').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Text 1</p><p class="small">- Robert, kampanjen <a href="#">Movember är här</a></p>',
        trigger : 'click'
    });
    $('#recoanna').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Text 2</p><p class="small">- Anna, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>',
        trigger : 'click'
    }); 
    $('#recochristian').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Text 3</p><p class="small">- Christian, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>',
        trigger : 'click'
    });
    $('#recohanjun').popover({
        placement : 'top',
        html : 'true',
        content : '<p>Text 4</p><p class="small">- Adam, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>',
        trigger : 'click'
    });

Upvotes: 0

Views: 481

Answers (2)

JT Nolan
JT Nolan

Reputation: 1210

Try This: When one popover is clicked use jquery to addclass hide to all the others, you need to remove this class once the user is done viewing to show all popovers again. it would looks something like this.

$(".allpopovers").addClass("hide");
$(this).removeClass("hide");

Upvotes: 1

Jared Eitnier
Jared Eitnier

Reputation: 7152

Not familiar with HAML but try something like this in your click function:

$.each('li:not('.active')', function() {
    $(this).addClass('hide');
});

Upvotes: 1

Related Questions