Can I accomplish what Bootstrap Popover does with a few functions instead of a full plug-in?

Question

I've researched several alternatives to the Bootstrap Popover feature, but haven't had any luck finding efficient solutions. The Popover plug-in seems to be overkill when all I want to do is open a little 'voice bubble' div by clicking on an image element. If the user clicks on the element that triggers this event, on the voice bubble itself, or anywhere on the page, the voice bubble should close again. I want to have several on one page. If the user opens one bubble and clicks on another trigger element, the current open bubble will close and the new one will open. It's almost like the accordion from jQueryUI in the toggle-able aspect.

I've some code, but I haven't quite got the jQuery right. Do I need a switch statement or a .each()?

HTML:

<div class="testimonial">
    <p class="leftCol">
        Click the link:
        <br />
        <a href="#" class="trigger" id="trig1">I'm the first link</a>
    </p>
    <div class="voiceContainer" id="vc1">
        <div class="voiceContent">
            You clicked the first link.
        </div>
        <div class="arrow arrow-bottom"></div>
    </div>
</div>
<div class="testimonial">
    <p class="leftCol">
        Click the link:
        <br />
        <a href="#" class="trigger" id="trig2">I'm the second link</a>
    </p>
    <div class="voiceContainer" id="vc2">
        <div class="voiceContent">
            You clicked the second link.
        </div>
        <div class="arrow arrow-bottom"></div>
    </div>
</div>

jQuery I attempted:

$(".testimonial").each(function(){
    $(this).find(".voiceContainer").hide();
});

$(".testimonial").each(function(){
    $(this).find(".trigger").click(function() {
        // I'm stuck here. I don't think that .voiceContainer is a sibling of .trigger
    });
});

Am I on the right track, or totally off-base? Any help is appreciated.

Answer 1

http://jsfiddle.net/6W253/3/ Not sure if this is what you wanted. It is a little sloppy.

CSS

.hide { display:none; }

Javascript:

$(".voiceContainer").each(function () {
    $(this).addClass("hide");

});$(".testimonial").each(function () {
    $(this).find(".trigger").click(function () {

        var voiceContainers = document.getElementsByClassName("voiceContainer");
        var triggers = document.getElementsByClassName("trigger");    
        for ( i = 0; i < triggers.length; i++)
        {   
            voiceContainers[i].className =  voiceContainers[i].className + " " + "hide";

        if (this == triggers[i]) 
        {               
            voiceContainers[i].className = "voiceContainer";                        
        }


        }
    });
});