html - Show/hide content using jquery in multiple DIVs -

I have only one page, say 5 posts, all in #article . The following jQuery code used to toggle the hidden / show is:

  $ ("Click-show-more"). Click here (function () (if ($ (".content"). Halcus ("show-more") {$ (this) .text ("show less"); and {$ (this) .text ("Show more");} $ ("content.") .toggleClass ("show-more");});   
  HTML  structure  
 
 Here are some text here Some text here is some text here Some text is here Some text is here Some text is here Some text is here Some text is here Some text is here Some text here Here is some text here. Here are some text here Some text is here Some text is here Some text is here Some text is here Some text here is some text here Some text is here Some text is here & lt; / div & gt; Lt; div class = "click-show-more" & gt; (show more) & lt; / div & gt; & lt; / div & gt;   
 Now, I have The structure is 5-6 times above the same page, and whenever I click on  Show more , all 5-6 posts are elaborate. I   < P>   
   
   
   
 I How do I modify only for the expansion of that particular post?   
 
  
  
  $ (". material"). $ (This) .closest ('article'). ('. material'). FindClass ("show-more")   
 Your click should affect the  content of particular article  then  this  Use context.  
 Also this line  
  $ ("content"). ToggleClass ("show-more");   
 should be  $ (this) .clostest ('article'). ('. Content') Toggle ();   
 Unless . Show-more {display: none}  is already defined. Click  
  Code   
  $ (". Click-show-more") (function () {var $ closestContent = $ (this ) .closest ('article'). ('$ Content'); if ($ closest content. Haas class ("show-more")) {$ (this). Text ("(show less");} And {$ (this). Text ("Show more");} $ nearby content- toggleClass ('show-more');});