UL accordion in foundation 4 - zurb-foundation

Question

I am new to foundation 4 and we are currently using foundation 4 in our project MVC4 + Foundation 4 (through NuGet package)
We want to use accordions on our views.
Foundation 4 offers Sections; http://foundation.zurb.com/docs/components/section.html
but as this looks too bland on the website, we looked at foundation 3 accordion which we felt suited our website; http://foundation.zurb.com/old-docs/f3/elements.php.
Need experts help in understanding how can we make the look & feel of accordions sections similar to the one's available in foundation 3.
We understand foundation 4 doesnot offer images anymore, so how can we implement the small icons on the right.

Answer 1

I'm no expert, but if I understand correctly you just want to add the little triangle image on the right. First of all, are you using scss files ? If not you should definitely check it out here. All you need is to install this visual studio plugin, then download and add the zurb-foundation scss files to your project.
Next up, go to the _section.scss file and look for this part of the code:
#mixin section($section-type:accordion) {
// Accordion styles
#if $section-type == accordion {
border-top: $section-border-size $section-border-style $section-border-color;
position: relative;
.title {
top: 0;
cursor: pointer;
width: 100%;
margin: 0;
background-color: $section-title-bg;
***********************************
*** add a background image here ***
***********************************
a {
padding: $section-padding;
display: inline-block;
color: $section-title-color;
font-size: emCalc(14px);
white-space: nowrap;
width: 100%;
}
&:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
}
.content {
display: none;
padding: $section-padding;
background-color: $section-content-bg;
&>*:last-child { margin-bottom: 0; }
&>*:first-child { padding-top: 0; }
&>*:last-child { padding-bottom: 0; }
}
&.active {
.content { display: block; }
.title { background: $section-title-bg-active;
**********************************************
*** add the "active" background image here ***
**********************************************
}
}
}
There are two ways to add the triangle, either use an image of your choice, or even better, use foundation's css function that creates triangles !
#include css-triangle(5px, #aaaaaa, top);
Note I have not tested modifying foundation's sections, but I'm pretty sure this should do the trick.

Answer 2

SCSS is always the best option. But, for others who are not yet ready to dive into SCSS, you can do it via CSS. In your CSS file, just include the following:
.section-container.accordion > section > .title:after,
.section-container.accordion > .section > .title:after {
content: '\25B8';
position:absolute;
right:10px;
font-size:22px;
}
.section-container.accordion > section.active > .title:after,
.section-container.accordion > .section.active > .title:after {
content: '\25BE';
position:absolute;
right:10px;
font-size:22px;
}
Of course, you can change the font-size as desired or you can simply ommit it. Hope that helps.