He conseguido lo que quería pero, como buen novato de javascript, supongo que habrá alguna manera mejor. Lo que he hecho es dar un nombre de clase al elemento lista de cada una de las tres secciones y colocar un código distinto para cada una de las páginas con lo que, por ejemplo, al entrar en "opcion-2", establezco "hide()" para las otras dos opciones y "show()" para "opcion-2". Como quiero que solo aparezca abierta la lista principal y no las sublistas, tengo que añadir otra línea para ocultarlas: $('#accordion ul li ul').hide();
Como digo, de javascript, ni idea. Me imagino que hay alguna forma de hacerlo sin añadir tanto código así que apreciaría si alguien me puede ayudar.
Código:
<script>
$(function() {
$('.opcion-1 ul').hide();
$('.opcion-2 ul').show();
$('.opcion-3 ul').hide();
$('#accordion ul li ul').hide();
$('#accordion li:has(ul)').children('a').click(function(event) {
$(this).next().slideToggle();
$('ul',$(this).parent().siblings()).slideUp();
event.stopPropagation();
});
});
</script>