show/hide text relevant to a class based on click using jquery
<p>I'm having a list of products displayed. Once the show more is clicked the text within the extras class needs to be displayed, the show more needs to be hidden and show less needs to be visible. The opposite needs to happen when show less is clicked.</p>

<p>I used the below jQuery code and it works but the problem is that it shows/hide add the extra text in every block. I want it to show only the relevant block.</p>

<p><strong>Javascript</strong></p>

<pre><code>$(document).ready(function() {

    $('.extras').css("display", "none");

    $('.showmore').click(function() {
        $(".extras").toggle();
        $('.showmore').hide();
        $('.less').show();
    });

    $('.less').click(function() {
        $(".extras").toggle();
        $('.extras').hide();
        $('.showmore').show()
    });

});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="blocks"&gt;
    &lt;div class="right"&gt;
        &lt;ul class="options"&gt;
            &lt;li class="x"&gt;&lt;a href="#"&gt;Service 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class="y"&gt;&lt;a href="#"&gt;Service 2&lt;/a&gt;&lt;/li&gt;
            &lt;li class="z"&gt;&lt;a href="#"&gt;Service 3&lt;/a&gt;&lt;/li&gt;
            &lt;li class="r"&gt;&lt;a href="#"&gt;Service 4&lt;/a&gt;&lt;/li&gt;
            &lt;li class="k"&gt;&lt;a href="#"&gt;Service 5&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="showmore"&gt;&lt;a&gt;+ show more&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="extras"&gt;
        &lt;p&gt;test text&lt;/p&gt;
        &lt;div class="less"&gt;&lt;a&gt;- hide&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="blocks"&gt;
    &lt;div class="right"&gt;
        &lt;ul class="options"&gt;
            &lt;li class="x"&gt;&lt;a href="#"&gt;Service 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class="y"&gt;&lt;a href="#"&gt;Service 2&lt;/a&gt;&lt;/li&gt;
            &lt;li class="z"&gt;&lt;a href="#"&gt;Service 3&lt;/a&gt;&lt;/li&gt;
            &lt;li class="r"&gt;&lt;a href="#"&gt;Service 4&lt;/a&gt;&lt;/li&gt;
            &lt;li class="k"&gt;&lt;a href="#"&gt;Service 5&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="showmore"&gt;&lt;a&gt;+ show more&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="extras"&gt;
        &lt;p&gt;test text&lt;/p&gt;
        &lt;div class="less"&gt;&lt;a&gt;- hide&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="blocks"&gt;
    &lt;div class="right"&gt;
        &lt;ul class="options"&gt;
            &lt;li class="x"&gt;&lt;a href="#"&gt;Service 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class="y"&gt;&lt;a href="#"&gt;Service 2&lt;/a&gt;&lt;/li&gt;
            &lt;li class="z"&gt;&lt;a href="#"&gt;Service 3&lt;/a&gt;&lt;/li&gt;
            &lt;li class="r"&gt;&lt;a href="#"&gt;Service 4&lt;/a&gt;&lt;/li&gt;
            &lt;li class="k"&gt;&lt;a href="#"&gt;Service 5&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="showmore"&gt;&lt;a&gt;+ show more&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="extras"&gt;
        &lt;p&gt;test text&lt;/p&gt;
        &lt;div class="less"&gt;&lt;a&gt;- hide&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Any help will be appreciated.</p>
