---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_balloon_accordion.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/cluster_balloon_accordion.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Layout for cluster balloon "Accordion"
Open in CodeSandbox
This example uses the cluster balloon layout "cluster#balloonAccordion".
The layout shows a list of geo objects, and when an item is clicked, information about the geo object is displayed.
Information about the selected geo object is set by a separate layout
and can be configured using the 'clusterBalloonItemContentLayout' option.
This example sets a custom layout with information about a geo object.
Layouts
of objects can be created using the templateLayoutFactory factory
and text templates.
Text templates generate the HTML content of the layout from a data hash
passed to the layout constructor.
In this example, the data provider is the geo object.
{% list tabs %}
- index.html
```html
Examples. Custom layout for information about a geo object
in the "Accordion" layout of the cluster balloon.
```
- cluster_balloon_accordion.js
```js
ymaps.ready(function () {
var mapCenter = [55.755381, 37.619044],
map = new ymaps.Map("map", {
center: mapCenter,
zoom: 9,
controls: [],
}),
// Possible values for icon colors.
placemarkColors = [
"#FF1F1F",
"#1F44FF",
"#1FFF8E",
"#FF1FF5",
"#FFEF1F",
"#FF931F",
"#AE6961",
"#6193AE",
];
// Creating a custom layout with information about the selected geo object.
var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
// The "raw" flag means that data is inserted "as is" without escaping HTML.
"" +
"{{ properties.balloonContentBody|raw }}
" +
""
);
var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true,
clusterOpenBalloonOnClick: true,
// Setting the "Accordion" standard layout for a cluster balloon.
clusterBalloonContentLayout: "cluster#balloonAccordion",
// Setting a custom layout.
clusterBalloonItemContentLayout: customItemContentLayout,
/**
* Setting the mode for opening the balloon.
* In this example, the balloon will never open in the panel mode.
*/
clusterBalloonPanelMaxMapArea: 0,
// Setting the size of the balloon content layout (in pixels).
clusterBalloonContentLayoutWidth: 250,
clusterBalloonContentLayoutHeight: 200,
/**
* You can disable displaying icons for geo objects in the list.
* In Internet Explorer earlier than version 9, icons are never displayed.
* clusterBalloonAccordionShowIcons: false
*/
});
// Populating the cluster with geo objects with random positions.
var placemarks = [];
for (var i = 0, l = 100; i < l; i++) {
var placemark = new ymaps.Placemark(
getRandomPosition(),
{
// Defining the data that will be displayed in the balloon.
balloonContentHeader: "Placemark #" + (i + 1),
balloonContentBody: getContentBody(i),
balloonContentFooter: "Matsuo Bashō",
},
{
iconColor: getRandomColor(),
}
);
placemarks.push(placemark);
}
clusterer.add(placemarks);
map.geoObjects.add(clusterer);
function getRandomPosition() {
return [
mapCenter[0] + (Math.random() * 0.6 - 0.3),
mapCenter[1] + (Math.random() * 0.8 - 0.4),
];
}
function getRandomColor() {
return placemarkColors[
Math.round(Math.random() * placemarkColors.length)
];
}
var placemarkBodies;
function getContentBody(num) {
if (!placemarkBodies) {
placemarkBodies = [
[
"A snowy morning -",
"By myself",
"Chewing on dried salmon",
].join("
"),
["Crow’s", "Abandoned nest,", "A plum tree."].join("
"),
[
"Fragrance of bindweed",
"On my palms the whole night –",
"Thinking of Chiyo-jo.",
].join("
"),
];
}
return (
"Body of the placemark #" +
(num + 1) +
"
" +
placemarkBodies[num % placemarkBodies.length]
);
}
clusterer.balloon.open(clusterer.getClusters()[0]);
});
```
{% endlist %}