Swap Show/Hide Behaviors for Multiple Elements Individually
<p>I've read previous questions asked about using jQuery to show/hide multiple elements individually, but I haven't been able to modify the code that worked for those users so that it works for my case. </p>

<p>Here's the breakdown:</p>

<ul>
<li>Page will have multiple blog posts </li>
<li>Each blog post will have default behavior of showing Post Excerpt with a "Show More" link</li>
<li>When the "Show More" link of a single post is clicked, the Post Excerpt should be hidden and the Full Post content should appear with a "Show Less" link at the bottom (should only occur on single post instance, so I've setup my code to include a custom ID but maybe I placed it in the wrong spot?)</li>
<li>When the "Show Less" link of a single post is clicked, the Full Post content should be hidden and the Post Excerpt should reappear with the "Show More" link at the bottom (again, should only occur on single post instance, not affect all posts at the same time)</li>
</ul>

<p>The problem: 
The actual result from the code below ends up doing the following:</p>

<ul>
<li>Swaps the Post Excerpt for the Full Content, as expected, when the "Show More" link is clicked</li>
<li>Does NOT swap the Full Content for the Post Excerpt when the "Show Less" link is clicked</li>
</ul>

<p>Any idea why? I'm not great with jQuery; I tend to learn code best when I hack around with existing code examples, so I'm still struggling to understand what's happening to cause this behavior instead of the expected behavior.</p>

<p>The actual HTML of the post index uses a lot of CMS template-specific code that may not make sense if I include it, so I've replaced it with the bare minimum of what the generated content would look like. I've added the jQuery and HTML I've setup for my testing purposes below...</p>

<pre><code>&lt;html&gt;
 &lt;head&gt;
   &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
&lt;body&gt;

    &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
     $('#full-3434').hide();
      $('.show-more').click(function () {
            var id = $(this).attr('id');
        $('#excerpt-' + id).hide(); 
        $('#full-' + id).show();
     });
      $('.show-less').click(function () {
            var id = $(this).attr('id');
        $('#full-' + id).hide(); 
        $('#excerpt-' + id).show();
     });
    });
    &lt;/script&gt;

&lt;div class="entry-body"&gt;
    &lt;div class="excerpt" id="excerpt-3434"&gt;
        &lt;p&gt;Post Excerpt Here. This will disappear when the "Show More" 
        link is clicked and the Full Post Content will display instead.&lt;/p&gt;
        &lt;p&gt;&lt;a href="#" class="show-more" id="3434"&gt;Show More&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="full" id="full-3434"&gt;
        &lt;p&gt;Full Post Content Here. This will be hidden by default. When 
        the "Show Less" link is clicked, the Full Post Content will 
        disappear and Post Excerpt will reappear.&lt;/p&gt;

        &lt;p&gt;&lt;a href="#" class="show-less" id="3434"&gt;Show Less&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Any and all help appreciated! :D</p>
