Create An ACF Repeater Accordion for use in WordPress.

Accordions can be a handy way of managing larger amounts of data to display only certain bits at a time.

Create the ACF Repeater fields for the accordion.

Accordion Acf Repeater

 

You can create as many accordion fields as needed, assign the field group to a post or page and populate the repeater rows.

Accordion Acf Repeater Rows

Add the Javascript

View the code on Gist.

Add the ACF Loop Accordion Code

View the code on Gist.

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
margin-bottom: 10px;
border: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover,
button:focus {
background-color: #ccc;
background: #ccc;
border: none;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;

}

.accordion:after {
content: ‘2795’; /* Unicode character for “plus” sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}

.active:after {
content: “2796”; /* Unicode character for “minus” sign (-) */
}

Fred Perry

The brand founded by triple Wimbledon champion Fred Perry in 1952 and adopted by generations of British subcultures ever since. T

S,M,L,XL,XXL,XXXL

Red, Green, Blue

 

Some additional CSS styling is needed, which is included in the code. The ACF Repeater code is pretty simple with just 2 fields used for the accordion label and accordion content.

 

Shortcode Version

You can also do it as a shortcode and insert the loop.

View the code on Gist.

 

 

Ref

Share:

Leave a Reply