javascript - Creating expandable list to show rest of content -

My site has a sidebar that shows categories in this format.

  Category2 Category 3 Category 4 Category 5  

Although I have about 50 which I need to display. Rather than pulling my sidebar away from the place rather than moving out of place, I wanted to display the top 10 and then provides a button that lets the sidebar expand to show the rest, so it shows 10 on the default, But if the button is clicked it will expand and I will be able to see all 50. I'm almost certain that this will use some jQuery, but I do not know where to start it.

Here is the function that gets categories from the database.

  function load_categories () {global $ db; $ Query = $ db- & gt; write_query ( 'SELECT c. *, to calculate AS' TABLE_PREFIX as COUNT (n.id). 'Newscategories c LEFT JOIN'. TABLE_PREFIX. 'Anaiaitiaiaidiaiansiti (Seediaidi news, n. CID) Sisiaidi ordered by Group Count by DESC '); ($ Cat = $ db- & gt; fetch_array ($ query)) {$ categories [$ cat ['cid']] = array ('name' = & gt; $ cat ['name'], 'count' = & Gt; $ cat ['count']); } Return $ categories; }  

Here is a bit of PHP code, which will output categories to each new category. {$ Sidebar as {foreach ($ all_categories $ cid = & gt; $ arr)

  if ($ all_categories) = '& Lt; A href = "index.php? Action = sort and cid = '. $ Cid.'" & Gt; . $ Arr ['name'] '('. $ Arr ['count']. ') & Lt; / A & gt; & Lt; Br / & gt; '; }} And {$ sidebar = 'There are no categories yet'; } The code below will solve your purpose.  

for you.

  & lt ;! DOCTYPE html & gt; & Lt; Html lang = "en" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Style & gt; # Mesidebar {height: 200px; Overflow-y: scroll up; Width: 150px; } & Lt; / Style & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ('mybutton'). Click (function () {$ ('# mysidebar'). CSS ('height', '100%');})}}; & Lt; / script & gt; & LT; Body & gt; & Lt; div id = "mysidebar" & gt; & Lt; p & gt; CATEGORY1 & lt; / p & gt; & Lt; p & gt; Kategory2 & lt; / p & gt; & lt; p & gt; Kategory3 & lt; / p & gt; & lt; p & gt; Kategory4 & lt; / p & gt; & lt; p & gt; Kategory5 & lt; / p & gt; & lt; p & gt; Kategory6 & lt; / p & gt; & lt; p & gt; Kategory7 & lt; / p & gt; & lt; p & gt; Kategory8 & lt; / p & gt; & lt; p & gt; Kategory9 & lt; / p & gt; & lt; p & gt; Kategoryl0 & lt; / p & gt; & lt; p & gt; Kategoryl & lt; / p & gt; & lt; p & gt; Kategory2 & lt; / p & gt; & lt; p & gt; Kategory3 & lt; / p & gt; & lt; p & gt; Kategory4 & lt; / p & gt << lt; / p & gt; & lt; p & gt; Category6 & lt; / p & gt; & lt; p & gt; Category7 & lt; / p & gt; & lt; p & gt; & lt; Lt; p & gt; Category8 & lt; / p & gt; & lt; p & gt; Cate Gory9 & lt; / p & gt; & lt; p & gt; Category10 & lt; / p & gt; & Lt; P & gt; CATEGORY1 & lt; / P & gt; & Lt; P & gt; CATEGORY2 & lt; / P & gt; & Lt; P & gt; CATEGORY3 & lt; / P & gt; & Lt; P & gt; Category4 & lt; / P & gt; & Lt; P & gt; Category5 & lt; / P & gt; & Lt; P & gt; Category6 & lt; / P & gt; & Lt; P & gt; Category7 & lt; / P & gt; & Lt; P & gt; Category8 & lt; / P & gt; & Lt; P & gt; Category9 & lt; / P & gt; & Lt; P & gt; Category10 & lt; / P & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Button id = "mybutton" & gt; Click here to expand it & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;