Bootstrap accordion html within WYSIWYG (Redactor)

Question

I am working with redactor, and I need to create functionality to add a collapsible section (bootstrap accordion) into the WYSIWYG.

I know how to initially add the html that will make the collapsible section work, and it is as follows:

// Insert collabsible code
var collapseHtml = '<div class="accordion" id="accordion' + collapsibleIndex + '">'
    + '<div class="accordion-group">'
        + '<div class="accordion-heading">'
            + '<h5 class="accordion-toggle" data-toggle="collapse" data-parent="#accordion' + collapsibleIndex + '" href="#collapse' + collapsibleIndex + '">'
                + 'Insert collapsible section header here'
                + '<i class="icon-chevron-right"></i>'
            + '</h5>'
        + '</div>'
        + '<div id="collapse' + collapsibleIndex + '" class="accordion-body collapse in">'
            + '<div class="accordion-inner">'
                + '<p>content</p>'
            + '</div>'
        + '</div>'
    + '</div>';

this.insertHtmlAdvanced(collapseHtml);

This inserts nicely, and I can edit the title and content. The problem is, I can also remove different parts of the collapsible element within Redactor.

I need the element to work as a block, and only have the title and content areas editable in the WYSIWYG.

Should I somehow use the 'contenteditable' attribute? Or is there another way I can go about this?