expand collapse base de datos

hola, estoy intentando mostrar el resto contenido que tengo en mi base de datos

General
Chat general, habla de cualquier tema de interes con gente de nuestro chat.

[B]General - GenteChats - España - Internacional[/B] - ver más

lo que esta en negrita son los items que tiene la BD, cuando yo le de en "ver mas" deberia desplegarse abajo el resto de items o todos los que tengo en mi base de datos de esa categoria y mostrar otro que diga "cerrar" para mostrar solo los 4 primeros, he estado buscando en google pero no encuentro nada, si alguien se compadeciera de mi :D, Gracias.

Hola!

La solución más fácil (diagrama de flujo):

1.- Generar, en PHP (o cualquier otro lenguaje), la lista de categorías, pero mostrando X y ocultando las demás en un div.
2.- Utilizando jQuery, mostrar la información al hacer clic en ver más.
3.- Utilizando jQuery, ocultar la información al hacer clic sobre cerrar.

Este debería ser el código generado por PHP (ejemplo):

<div class="categories">
  General - GenteChats - España - Internacional - <a class="expander">ver más</a>
  <div class="expandable">
    Cat1 - Cat2 - Cat3<br />
    <a class="collapser">cerrar</a>
  </div><!-- .expandable -->
</div><!-- .categories -->

Y el código jQuery:

<script src="jquery-1.11.1.min.js"></script><!-- Descarga jQuery desde aquí: http://jquery.com/download/ -->
<script>
  jQuery(document).ready(function($) {
    $('.expandable').hide(); // Esconde las div sólo si javascript está habilitado.

    $('.categories .expander').on('click', function(e) {
      e.preventDefault();
      $(this).next('.expandable').fadeIn();
    });

    $('.categories .collapser').on('click', function(e) {
      e.preventDefault();
      $(this).parent().fadeOut();
    });
  });
</script>

CSS

<style type="text/css" media="all">
  .expander { text-decoration: underline; }
  .expander:hover { cursor: pointer; }
  .collapser { text-decoration: underline; }
  .collapser:hover { cursor: pointer; }
</style>

hola skaparate, si fuera puro html seria genial, pero lo que se imprime es directamente de la base de datos

<div id="linkal"><?php
						$consucates = mysql_query("SELECT * from salas  where id_categoria=7 order by id_sala LIMIT 4");
while($mc = mysql_fetch_assoc($consucates))
        { echo "<a href='$web/salas-de-chat/".$mc[id_sala]."-".seo($mc[titulo]).".php'>$mc[titulo]</a> "; }?><a href="#">ver más</a></div>

el problema seria que todos los resultados se imprimen directamente y no hay una parte intermedia donde yo pueda poner el codigo para mostrar/esconder.

Claro! Lo que pasa es que yo te di una plantilla, pero tú debes averiguar cómo implementarlo en tu problema.

Si se puede hacer exactamente lo que yo dije en ese trozo de código, así que te dejaré pensar cómo hacerlo (no es que quiera ser pesado, es porque debes aprender [:)]).

Eso estaria bien, busque en google y no encontre solucion a ese problema por eso decidi venir aca y la verdad sin guia no tengo ni idea como hacerlo ya q no se nada de base de datos u,u