Best practice implementation

Best practice implementation

Im looking to develop a plugin that can apply common functionality to multiple elements.

My issues is that if the state of the current "clicked" element is set to display then any other displaying elements must be hidden. What would be the best way to actually do this? I have done something before using prototyping where I stored the current displaying element as a variable in the object and hiding it on new element click and then storing the new element.

NOTE: the "hide" class comes from Twitter bootstrap which is just setting "display: none".

Example HTML:

  2. <div class="speech-bubble">
  3. <img src="icon"/>
  4. <div class="bubble hide">I'm some text</div>
  5. </div>
  6. <div class="speech-bubble">
  7. <img src="icon"/>
  8. <div class="bubble hide">I'm more text</div>
  9. </div>
Simplified jQuery plugin concept:
  2. $.fn.speechBubble = function(){
  3. return this.on('click', function(){
  4. /* hide any possible open bubbles here? Maybe call a method that closes ALL? */
  6.                 //change bubble visual state
  7. $(this).find('.bubble').toggle();
  8. });
  9. }
Example implementation:
  1. $('.speech-bubble').speechBubble();
------------------------------------------------------

Also is it possible to access a "close" method of all the bubble created element's so as to close all without actually running the "initialise" state eg:
  1. $('.speech-bubble').speechBubble.close();
Would I be looking at doing something similar to the explanation at:  http://learn.jquery.com/plugins/advanced-plugin-concepts/ ?