title: Jquery toggle div hide/show from dynamic id's
body: <p>I have, essentially, an unlimited number of containers with dynamic ids and a dynamic menu to load each containers content. I have done this with static id's (but still seems such a heavy use) but do not know where to go to use dynamic.</p>
  
  <p>When a nav link (from .img_select) is clicked it shows the corresponding div and hides all others in the group. It also updates the class of the menu items so the clicked item becomes selected, and the remaining become unselected.</p>
  
  <pre><code>&lt;div id="pf1_1"&gt;
        My content for pf1_1 container goes here
  &lt;/div&gt;
  &lt;div id="pf1_2"&gt;
        My content for pf1_2 container goes here
  &lt;/div&gt;
  &lt;!-- This could have a dozen+ or more divs, or only 1 //--&gt;
  &lt;p class="img_select"&gt;&lt;span class="pf_current" id="pfc1_1"&gt;&lt;a href="#"&gt;1-1&lt;/a&gt;&lt;/span&gt; &lt;span class="pf_next" id="pfc1_2"&gt;&lt;a href="#"&gt;1-2&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;div id="pf2_1"&gt;
        My content for pf2_1 container goes here
  &lt;/div&gt;
  &lt;div id="pf2_2"&gt;
        My content for pf2_2 container goes here
  &lt;/div&gt;
  &lt;div id="pf2_3"&gt;
        My content for pf2_3 container goes here
  &lt;/div&gt;
  &lt;!-- This could have a dozen+ or more divs or only 1 //--&gt;
  &lt;p class="img_select"&gt;&lt;span class="pf_current" id="pfc2_1"&gt;&lt;a href="#"&gt;2-1&lt;/a&gt;&lt;/span&gt; &lt;span class="pf_next" id="pfc2_2"&gt;&lt;a href="#"&gt;2-2&lt;/a&gt;&lt;/span&gt; &lt;span class="pf_next" id="pfc2_3"&gt;&lt;a href="#"&gt;2-3&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>the jquery I would like to create dynamically something similar to this</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $("#pf1_2").hide();
      $("#pf2_2").hide();
      $("#pf2_3").hide();
  
      $('#pfc1_1').click(function(){
      $("#pf1_2").hide('fast');
      $("#pf1_1").show('fast');
      $("#pfc1_1").removeClass("pf_next").addClass("pf_current");
      $("#pfc1_2").removeClass("pf_current").addClass("pf_next");
      });
      $('#pfc1_2').click(function(){
      $("#pf1_1").hide('fast');
      $("#pf1_2").show('fast');
      $("#pfc1_2").removeClass("pf_next").addClass("pf_current");
      $("#pfc1_1").removeClass("pf_current").addClass("pf_next");
      });
      $('#pfc2_1').click(function(){
      $("#pf2_2").hide('fast');
      $("#pf2_3").hide('fast');
      $("#pf2_1").show('fast');
      $("#pfc2_1").removeClass("pf_next").addClass("pf_current");
      $("#pfc2_2").removeClass("pf_current").addClass("pf_next");
      $("#pfc2_3").removeClass("pf_current").addClass("pf_next");
      });
      $('#pfc2_2').click(function(){
      $("#pf2_1").hide('fast');
      $("#pf2_3").hide('fast');
      $("#pf2_2").show('fast');
      $("#pfc2_2").removeClass("pf_next").addClass("pf_current");
      $("#pfc2_1").removeClass("pf_current").addClass("pf_next");
      $("#pfc2_3").removeClass("pf_current").addClass("pf_next");
      });
      $('#pfc2_3').click(function(){
      $("#pf2_2").hide('fast');
      $("#pf2_1").hide('fast');
      $("#pf2_3").show('fast');
      $("#pfc2_3").removeClass("pf_next").addClass("pf_current");
      $("#pfc2_2").removeClass("pf_current").addClass("pf_next");
      $("#pfc2_1").removeClass("pf_current").addClass("pf_next");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>If you can point me in the right direction, be much appreciated, thank you.</p>