This details how to set up an accordion group in a text area.

Text Area HTML Code

Paste the following template into your text area editor in HTML mode

<div class="accordion-group">
	<h3 class="setting-heading">Setting Heading</h3>
	<div class="setting">
		   <h4>Inline heading</h4> <SpotfireControl id="392ae8aa009d4346b2df5d33072313ee" /><br />
		 
		   <h5>Heading with line break</h5>
		   <SpotfireControl id="fa0daa59d7bf46b18b7f154c017926f1" />
	</div>

	<div class="accordion">
	<h3>Accordion Group Title 1</h3>
		<div>
		<h5>Heading with line break</h5>
		<SpotfireControl id="154226ede63d4d7f89286c4766e04c49" />
		</div>

	<h3>Accordion Group Title 2</h3>
		<div>
		<h4>Inline heading</h4> <SpotfireControl id="392ae8aa009d4346b2df5d33072313ee" /><br />
		 
		<h5>Heading with line break</h5>
		<SpotfireControl id="00da26548ef84f4cb5b864e2ed15405a" />
		</div>
	</div>
</div>

Javascript Code

Add this to the text area javascript, by clicking on the javascipt button on the editor

If adding this code for the first time, click "New"

Name the script "Accordion" and paste the following into the script portion:

window.onload = $('.accordion-group').each(function(i,li) {
	li.id = "accordion-group-" + i.toString();
});

window.onload = $('.setting-heading').each(function(i,li) {
	li.style.borderRadius = "4px 4px 0px 0px";
	li.style.background = "#1E2054";
	li.style.color = "white";
	li.style.padding = "8px";
	li.style.fontSize = "14px";
	li.style.margin = "10px 0px 0px 0px";
	x = li.querySelectorAll("span");
	for (i = 0; i < x.length; i++) {
		x[i].style.color = "white";
	}
});

window.onload = $('.setting').each(function(i,li) {
	li.style.padding = "10px";
	li.style.border = "1px solid lightgray";
	li.style.margin = "0px 0px 0px 0px";
	x = li.querySelectorAll("h4");
	for (i = 0; i < x.length; i++) {
		x[i].style.fontSize = "12px";
		x[i].style.display = "inline";
		x[i].style.margin = "5px 5px 0px 0px";
	}
	x = li.querySelectorAll("h5");
	for (i = 0; i < x.length; i++) {
		x[i].style.fontSize = "12px";
		x[i].style.margin = "5px 5px 0px 0px";
	}
});

window.onload = $('.accordion').each(function(i,li) {
	li.id = "accordion-" + i.toString();
	li.style.fontSize = "11px";
	
	x = li.querySelectorAll("div");
	for (i = 0; i < x.length; i++) {
		x[i].style.fontSize = "11px";
		x[i].style.padding = "10px";
	}
	
	x = li.querySelectorAll("h2");
	for (i = 0; i < x.length; i++) {
		x[i].style.margin = "5px 0px 5px 0px";
	}
	
	x = li.querySelectorAll("h3");
	for (i = 0; i < x.length; i++) {
		x[i].style.borderRadius = "4px 4px 0px 0px";
	}
	
	x = li.querySelectorAll("h4");
	for (i = 0; i < x.length; i++) {
		x[i].style.fontSize = "12px";
		x[i].style.display = "inline";
		x[i].style.margin = "5px 5px 0px 0px";
	}
	
	x = li.querySelectorAll("h5");
	for (i = 0; i < x.length; i++) {
		x[i].style.fontSize = "12px";
		x[i].style.margin = "5px 5px 0px 0px";
	}
	
	$(li).accordion({
        collapsible: true,
        active: false,
        heightStyle: 'content',
        activate: function(event, ui) {
            $(".sf-input-with-placeholder").width("173px");
            $(".ListContainer").width("200px");
            $(".ListContainerScroll").width("194px");
            $(".Image").css("left","197px");
            $(".sfc-scrollable").width("192px");
            $(".ListContainerScroll .HorizontalScrollbarContainer").width("178px");
            $(".ListContainerScroll .VerticalScrollbarContainer").css("left","180px");
            $(".ListContainerScroll .VerticalScrollbarContainer").css("top","0px");
            $(".sf-element-list-box .ScrollArea").width("178px");
            $(".ListItems .sf-element-list-box-item").width("166px");
        }
	});
});

window.onload = $('.ui-accordion-header').each(function(i,li) {
	li.style.fontSize = "14px";
	li.style.fontWeight = "bold";
	li.style.color = "white";
	li.style.background = "#1E2054";
});

window.onload = $('.ui-accordion-content').each(function(i,li) {
	li.style.fontSize = "11px";
	li.style.background = "white";
});

When finished, click "OK"

Make sure that "Accordion" is highlighted and click "OK"

Click the "save" icon and exit

The accordion should now be visible on the text area

Known limitations and issues

Through this process, I have identified an issue when it comes to dropdown lists within the accordion. The styling on the dropdown loses width and the options lose their spacing and height.

It is therefore recommended to place any dropdown lists within the setting div. This is outside of accordion and will therefore not be affected.

Sources

  • No labels