How to make accordion using the placeholders, change the names of categories and content via custom fields?

Hello!

There is a layout with this piece of code:

<div class="submenu">
the <ul>
 <li data-item="1"><span>Volcanoes</span></li>//Want to get rid of these things and realize all placehoder
 <li data-item="2"><span>side dish</span></li>//Want to get rid of these things and realize all placehoder
 <li data-item="3"><span>Pizza</span></li>//Want to get rid of these things and realize all placehoder
 <li data-item="4"><span>Water</span></li>//Want to get rid of these things and realize all placehoder
</ul>
</div>
<div class="cont">
 <div class="items" data-item="1">
 <div class="item">
 <div class="img">
 <img src="/img/products/vulkany/1.JPG">
</div>
the <strong>Volcanoes</strong>
<p>600тг.</p>
</div>
</div>
 <div class="items" data-item="2">
 <div class="item">
 <div class="img">
 <img src="/img/products/vulkany/1.JPG">
</div>
the <strong>Volcanoes</strong>
<p>600тг.</p>
</div>
</div>
</div>

QUESTION:
In admin to do so, to be in one of the boxes marked add category, and accordingly the contents of these categories.
How can implement at the moment:

<div class="submenu">
the <ul>
 <li data-item="1"><span>Volcanoes</span></li> 
 <li data-item="2"><span>side dish</span></li>
 <li data-item="3"><span>Pizza</span></li>
 <li data-item="4"><span>Water</span></li>
</ul>
</div>
<div class="cont">
 <div class="items" data-item="1">
 [[getImageList? 
&tvname=`cat1`
&tpl=`tpl.main_slide`
]]
</div>
 <div class="items" data-item="2">
 [[getImageList? 
&tvname=`cat2`
&tpl=`tpl.main_slide`
]]
</div>
</div>

But this method is not suitable, because I feel that here stinks, and I feel that the client was able to do everything through custom fields not scansorial in code. Can you please tell me what to Google or some article.