php - Need help displaying array content programmatically -

I have an associative array in which

is important for the titles of a jQuery navigation list working for the part Look at the code at the left of the picture below:

The problem is on the right side, the list on the right is populating automatically, when the tab should have content for the "Appellachian and Rural Studies" tab. When I load the page it is generated, but when I click on any individual link, the code works correctly and shows only the content area title related to the right tab, see below:

Here the code is doing this:

  & lt; ! - Content of tabulated research areas - & gt; & Lt; H4 & gt; Research area & lt; / H4 & gt; & Lt; Hour & gt; & Lt; / Hour & gt; & Lt; Script type = "text / javascript" & gt; / * & Lt ;! [CDATA [* / $ (document) .ready (function () {$ ("# tab li"). Click (function () {// first active active tab $ active class "active" "#tabs li" AddClass ("active"); // Hide all tab content $ (". Tab_content"). RemoveClass ('active'); // Now add selected / clicked tabs ($). Here we select selected href var of selected tab tab (Hide); // Here ("A"). Entry ("href"); // Show selected tab content $ (select_tab). FadeIn (); // Finally, we return false which Yes, we are, so click on the link were not returned;});}); / *]] & Gt; * / & Lt; / Script & gt; & Lt; Div id = "tabs_wrapper" & gt; & Lt; Div id = "tabs_container" & gt; & Lt ;? Php $ Researchareas = array ('1' => 'Appalachian and Rural Studies', '2' => Child's Welfare, '3' => 'Dirtyology', '4' => Human '5' => 'Intimate partner violence', '7' => 'LGBTQ', '8' => 'Substance Abuse', '5' = & gt; 'International Social Work', '5' = & gt; And misuse ',' 9 '= & gt; Suicide survivor and beerweed,' 10 '=' Trauma and post-traffic stress', '11' = 'Veterans and military social work'); ? & Gt; & Lt; Ul id = "tab" & gt; & Lt ;? Php foreach ($ $ Key = & gt; $ value as research) {$ tabname = 'tab' $ Key; ? & Gt; & Lt; Li & gt; & Lt; A href = "# & php echo $ tabname?"; & Gt; & Lt ;? Php echo $ value? & Gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt ;? Php}? & Gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "tabs_content_container" & gt; & Lt ;? Php foreach ($ $ key = & gt; $ value as $ $) {$ divtab = 'tab' $ Key; ? & Gt; & Lt; Div id = "& lt ;? php _e ($ divtab) ;? & gt;" Class = "tab_content" style = "display: block;" & Gt; & Lt; H4 & gt; & Lt ;? Php _e ($ value); ? & Gt; & Lt; / H4 & gt; & Lt; / Div & gt; & Lt ;? Php}? & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - End tabbed research content area - & gt;  

I do not necessarily need to load all the array values ​​in the entire list on page loads, and instead, just display the first tab correctly, such as the second image In. I am not sure where I am missing, but I am most definitely. Any help is greatly appreciated and I will be grateful for ever.