jQuery Toggle Duplication Stops Working
<p>Just setup jQuery Toggle. Here's the function below. it works fine. Basically when you click 'Show More' it shows more content, and the word 'Show More' changes to 'Show Less'.</p>

<pre><code>$('#toggle').toggle(
        function() {
            $('#content').slideDown();
            $(this).html('Show less &amp;rarr;');
        }, 
        function() { 
            $('#content').slideUp(); 
            $(this).html('Show more &amp;rarr;');
        }
    );
</code></pre>

<p>This is fine, my issue is having more than one on a page. For some reason when I copy and paste the same HTML multiple times to create more than one toggle content, the others don't work and only the first one does. Here's the HTML:</p>

<pre><code>&lt;div id="team-page"&gt;

    Intro paragraph

    &lt;a id="toggle" href="#"&gt;Show more &amp;rarr;&lt;/a&gt;

    &lt;div id="content"&gt;
    Content shown when toggled
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So when I duplicate this multiple times, the rest don't work. There is the obvious get around by adding #toggle1 #toggle2 and duplicating and amending the jQuery - but what's the better way? Many thanks.</p>
