Add accordion or tabs interface to your fieldset sections
by Rudy Affandi (2016) version 1.1.0
This addon turns your section fieldtype into accordions or tabs. Similar to what Section Tabs was in V1.x
Drop in the Sections folder into your site/addons
To use accordion styling, edit the default.yaml and change the value to accordion or tabs. To go back to the default v2, just put none in there.
Trying to use this plugin with tabbed sections without success.
title: Block page
fields:
title:
type: title
display: Title
blocks:
type: replicator
sets:
default_block:
display: Standard
fields:
general_fields:
display: General
type: section
format:
display: Format
type: select
options:
2-1-100: 2:1 100%
1-1-100: 1:1 100%
1-1-50: 1:1 50%
1-2-50: 1:2 50%
default: format-2-1-100
top_text:
display: Top Text
type: redactor
settings: Minor
middle_text:
display: Middle Text
type: redactor
settings: Minor
bottom_text:
display: Bottom Text
validate: boolean
type: redactor
settings: Minor
background_fields:
display: Backgrounds
type: section
background_color:
display: Bakground color
type: text
background_image:
display: Bakground image
type: assets
container: main
max_files: 1
expand_block:
display: Expand
fields:
col_1:
display: Column 1
type: redactor
settings: Minor
col_2:
display: Column 2
type: redactor
settings: Minor
col_3:
display: Column 3
validate: boolean
type: redactor
settings: Minor
background_color:
display: Bakground color
type: text
extra-v-padding:
display: Extra vertical padding
type: toggle
default: false
divider_block:
display: Divider
fields:
padded:
display: Padded
type: toggle
default: true
Results:
I've been using this for a few days now. It was perfect to pull all my fields into shape as I have a huge amount of flexibility in my fieldset. I hit a roadblock first using tabs, it completely messed the whole CP when accessing a page.
Changed to accordion (which was my preferred choice anyway) and bam, everything looked perfect.
But I've just run into an issue. As you can see, I'm using a replicator inside a replicator. This still works, however, I have child grids as well. Inside these grids, I'm using a partial with a section. This partial is used in the grid parent as well, which is why when I click on the child sections, it collapses the parent and not the child.
This makes accessing the child sections impossible without disabling Sections :(.
feature_1:
display: Feature 1
instructions: Background Video with content and features in the foreground.
fields:
section_settings:
type: partial
fieldset: theme/section_settings
background_video:
type: partial
fieldset: theme/background_video
content_copy:
type: partial
fieldset: theme/content_settings
features:
type: grid
display: Features
min_rows: 0
max_rows: 3
mode: stacked
add_row: Add New Feature Item
fields:
content:
type: partial
fieldset: theme/content_settings
Change the first set of CSS rules to
.section-header, .nav-tabs a, .section-header label, .section-header small, .nav-tabs label, .nav-tabs li {
cursor: pointer !important;
}
(That way the text does not make the cursor go away.
Replicator field exists in the CP before install and I can edit content.
When I install the addon for tabs, I can see the replicator blocks but the content isn't there and fields are hidden.
Here's a screen recording
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.