¿Cómo hago para ocultar la lista del ítem anterior de un list-group?

Buenas noches, estoy trabajando con list-group de Bootstrap 3 para hacer mi menú vertical pero ahora me presenta un problema: cuando selecciono el segundo ítem, el primero no oculta su lista. Esto sucede con los otros ítems también, ¿qué es lo que me falta en el código? Porque no me funciona como el acordeón.

<div id="menuLista" class="nav-sidebar">
    <div class="list-group">
        <a href="#lista1" class="list-group-item active color" data-toggle="collapse"
           data-parent="#menuLista">
           Paciente <i class="pull-right glyphicon glyphicon-menu-right"></i>
        </a>
        <div class="collapse" id="lista1">
            <a href="#" class="list-group-item color-item">
                <i class="glyphicon glyphicon-user"></i> Nuevo Paciente
            </a>
            <a href="#" class="list-group-item color-item">
                <i class="glyphicon glyphicon-search"></i> Consultar Paciente
            </a>
        </div>
 
        <a href="#lista2" class="list-group-item color" data-toggle="collapse"
           data-parent="#menuLista">
           Agenda <i class="pull-right glyphicon glyphicon-menu-right"></i>
        </a>
        <div class="collapse" id="lista2">
            <a href="#" class="list-group-item color-item">
                <i class="glyphicon glyphicon-th-list"></i> Nueva Cita
            </a>
        </div>
 
        <a href="#lista3" class="list-group-item color" data-toggle="collapse"
           data-parent="#menuLista">
           Medicamentos <i class="pull-right glyphicon glyphicon-menu-right"></i>
        </a>
        <div class="collapse" id="lista3">
            <a href="#" class="list-group-item color-item">
                <i class="glyphicon glyphicon-list-alt"></i> Reporte
            </a>
            <a href="#" class="list-group-item color-item">
                <i class="glyphicon glyphicon-cog"></i> Usuario
            </a>
        </div>
 
        <a href="#" class="list-group-item color">Configuración</a>
    </div>
</div>

Respuestas

Si he entendido bien la pregunta, creo que no hay ningún error con tu código. La razón por la que al seleccionar un elemento no se ocultan los demás es que estás usando las listas de elementos de Bootstrap, que no son dinámicas ni ocultan los elementos no seleccionados.

Para hacer el "acordeón" que quieres, tienes que usar el plugin "collapse" de JavaScript junto con un elemento de tipo panel de Bootstrap. En esta página tienes un ejemplo completo donde puedes ver cómo funciona y el código necesario: getbootstrap.com/javascript/#collapse-example-accordion

@javiereguiluz

6 junio 2015, 10:06

Muchas gracias @javiereguiluz muy cierto, le coloqué al <div> el elemento panel y me funcionó. Aprendí algo nuevo =) y a la final en el segundo <div> quedó así:

<div class="list-group panel">

@eng_teresa

6 junio 2015, 21:28