Layout для адаптивного дизайна

Доброго времени суток! Вопрос такой. Есть макет:

Есть меню, в котором в каждом пункте есть по несколько подпунктов. В мобильной версии при нажатии на каждый подпункт появляется содержимое данного подпункта. При нажатии на другой подпункт прячется содержимое открытого и открывается содержимое другого. В версии для десктопов при активации пункта всё содержимое его подпунктов отображается справа от меню. При этом содержимое подпунктов может содержать разное по количеству информации содержимое (то есть размеры могут меняться, не жестко заданы). как это реализовать на javascript что бы активировать не вызывает затруднений. вопрос как сделать layout контента? можно ли реализовать его с помощью css(что крайне желательно)? или только javascript может решить задачу с layout?

PS небольшие замечания по мотивам ответов. там стандартный аккордеон только на мобильной версии. поэтому не надо писать про аккордеон, это понятно и так. так же велик соблазн написать про табы, но опять же хорошо только отчасти и для десктопа. там пункт, а у него по несколько ПОДПУНКТОВ. на мобиле при нажатии на ПОДПУНКТ появляется контент. а на десктопе при нажитии на ПУНКТ справа появляется контент всех ПОДПУНКТОВ