Как задать разные стили под разные состояния списков li(display: none, display: list-item)

[daniyorik]

В общем покажу наглядно
выглядит свернуто: во вложении 1.png
выглядит развернуто: во вложении 2.png

Я думаю понятно что надо чтобы все эти списки были друг над другом, ну и иконки тоже, все чтобы было красиво, как бы в табличном виде,

код скрипта:
<script>
$("button").click(function () {
$("li").slideToggle("fast");
});
</script>

Само построение идет через <ul><li>
Заголовки стоят в блоке над <ul>
Подтолкните в нужном направлении, как ставить стили на разные состояния чтобы я мог придать позиционирование элементам в определенной области фиксированное,
Или может как то код изменить,

 

[daniyorik]

может есть псевдоклассы какие нибудь?
я просто только знакомлюсь с jq, может можно в скрипте указать, например до действия одно состояние после другое, и потом в ксс прописывать стиль для одного состояния и стиль для другого состояния, если такое реально, то расскажите как

 

[daniyorik]

Решил проблему