jquery accordion ui styling on first expandable table but not on the other -

I do not do much programming and I'm playing with jquery UI components so hopefully some of them in our HTML Can be included. Production. I am currently trying to see how the Appordian works in a table and collects some code at the same time. I like styling that jquery provides but I can only get the style to work for the first line of the first table. Please help!

  & lt ;! Doctype html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Title & gt; JQuery UI Accordion - Compact Content & lt; / Title & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" & gt; & Lt; / Script & gt; & Lt; Link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel = "stylesheet" type = "text / css" /> & Lt; Script & gt; $ (Function () {$ ("#accordion"). Accordon ({collapsible: true}) var $ activity = $ ('activity'); $ activity.find ("tr") .No ('.') ; Activity (withdrawal); $ activity.find ("tr"). Eq (0). Show (); $ activity.find (". Accordion") Click (function () {$ activity. Find ('.addition') No (this) .Syling () FeedsAut (500); $ (this) .Syling (). FeedToggle (500);}). Eq (0). Trigger ('click') ;}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Table class = "activity" & gt; & Lt; Tbody & gt; & Lt; Tr id = "accordion" class = "accordion" & gt; & Lt; Td colspan = "3" & gt; This header is & lt; / Td> & Lt; / TR & gt; & Lt; Tr id = "accordion" & gt; & Lt; TD & gt; Activity & lt; / TD & gt; & Lt; TD & gt; Details & lt; / TD & gt; & Lt; TD & gt; Role & lt; / TD & gt; & Lt; / TR & gt; & Lt; Tr id = "accordion" & gt; & Lt; Td> Provide advertisements for liabilities. & Lt; / Td> & Lt; Td> Provide advertisements for liabilities. & Lt; / Td> & Lt; Td> Provide advertisements for liabilities. & Lt; / Td> & Lt; / TR & gt; & Lt; / Tbody & gt;  

  & lt; Table class = "activity" & gt; & Lt; Tbody & gt; & Lt; Tr id = "accordion" class = "accordion" & gt; & Lt; Td colspan = "3" & gt; This header is & lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; Activity & lt; / TD & gt; & Lt; TD & gt; Details & lt; / TD & gt; & Lt; TD & gt; Role & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td> Provide advertisements for liabilities. & Lt; / Td> & Lt; Td> Provide advertisements for liabilities. & Lt; / Td> & Lt; Td> Provide advertisements for liabilities. & Lt; / Td> & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

The ID must be unique, in your case you accordion Id for more than one element.

Instead of using class accordion and delete the Adrian as an ID:

  $ (function () {$ (" Accordion ({collapsible: true}) var $ activity = $ ('activity'); $ activity.find ("tr") No. ('. Accordion'). Hide (); $ Activity Find ("tr"). Eq (0) Show $ (); $ activity.find (". Accordion"). (Function () {$ activity.find ('. Accordion').) .siblings ( ). Feedout (500); $ (this). Sybinks (). Fadegot (500);}). Eq (0). Triggers ('click');});  

Demo: