title: How to convert jQuery code into a plugin? and plugin development patterns
body: <p>I have developed the following jQuery code.</p>
  
  <p>I have some questions:</p>
  
  <ol>
  <li>What is the best programming pattern to develop a jQuery plugin?</li>
  <li>How do I convert my code into a plugin? (I know it is possible to do what I am asking with <code>$.fn.function</code>, but what I don't understand is how to use it with an object.)</li>
  <li>Should I learn and master a single programming pattern or do I have to learn patterns, all exists?</li>
  </ol>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;ul class="linkContainer"&gt;
      &lt;li&gt;&lt;a href="#" class="link" data-link="one"&gt;one&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="link" data-link="two"&gt;two&lt;/a&gt;&lt;/li&gt;
  
  &lt;div class="moreDetailsSection" data-section="one"&gt;
      chakabakas
  &lt;/div&gt;
  &lt;div class="moreDetailsSection" data-section="two"&gt;
      sasjakjk
  &lt;/div&gt;
  </code></pre>
  
  <p>And my JavaScript:</p>
  
  <pre><code>  (function ($) {
  
  
      var animation = {
          options: {
              linkContainer : $('.linkContainer'),
              section: $('.section'),
              link : $('.link'),
              mainEffect: 'slideToggle',
              mainEffectSpeed: 300
          },
  
          init: function (options) {                                       
              var link = this.options.link;
  
              $.extend(this.options, options); 
              link.on('click', this.changeWindow );
          },
  
          changeWindow: function () {
              var linkId = $(this).data('link'),
                  options = animation.options,
                  sectionContainer = animation.options.section,
                  elements = sectionContainer,
                  element = elements.filter('[data-section="'+ linkId +'"]');                                      
                  element[options.mainEffect](options.mainEffectSpeed);                    
  
          }            
  
      }        
  
      animation.init();
  
  
   })(jQuery);
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/8bmU6/" rel="nofollow noreferrer">Demo</a></strong></p>