This plugin allows you to add an interactive accordion to your content.
<!DOCTYPE html>
<html>
<head>
<title>Redactor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-folder/redactor.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-folder/redactor.js"></script>
<script src="/your-folder/plugins/accordion/accordion.js"></script>
<!-- call -->
<script>
Redactor('#entry', {
plugins: ['accordion']
});
</script>
</body>
</html>By default, the accordion in the editor has no styles. You can add them in your CSS, for example like this:
<style>
[data-accordion-item] {
margin-bottom: 10px;
}
[data-accordion-content] {
background: #f0f0f0;
padding: 20px;
}
[data-block="accordion"] {
border: 1px solid #eee;
padding: 20px;
border-radius: 9px;
}
[data-block="accordion"] [data-accordion-item]:last-child {
margin-bottom: 0;
}
</style>