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.
June 10th 19 at 14:46
1 answer
June 10th 19 at 14:48
Why two different TV all in one to do migh make one the category field, the second field is the contents of DataItem idx
Don't understand.
Structure is obtained:
*category(???)
*image(field type image)
*name(text)
*price(text)

And as far as I can imagine in my head it does not facilitate the work of the add/edit fields for the administrator. - Bradford_Johnson commented on June 10th 19 at 14:51
,this is clearly not TV in General. It's a document which has a TV price and picture - Janick.Rutherford commented on June 10th 19 at 14:54

Find more questions by tags MODX