CEFEGEN Service Tabs

A WordPress plugin for building responsive, SEO‑friendly service‑comparison tab widgets — managed entirely from the WordPress admin and rendered anywhere with a single shortcode. Fully hardened against external CSS interference from themes, page builders and third‑party plugins.

Overview

CEFEGEN Service Tabs lets you present a catalogue of services as an interactive two‑column widget: a list of selectable items on the left (the sidebar) and a rich detail panel on the right. It was built for medical / laboratory service pages (paternity testing, genetics, etc.) but works for any "pick a service, see its details" layout.

Each item supports a price, turnaround time, badge, description, feature checklist and two call‑to‑action buttons. All content is rendered server‑side and stays in the DOM at all times, so it remains fully indexable by search engines.

Features

• Two layout modes
  • Simple — a flat list of tabs. Each panel heading is an <h2>.
  • Multi‑level — a grid of category cards (<h2>), each expanding into its own set of tabs whose panels use <h3>. Ideal for grouping related services.
• No‑code admin UI — a dedicated custom post type with a visual editor: icon picker, badges, pricing, turnaround time, feature checklist, descriptive HTML and configurable buttons (text + URL).
• Responsive by design
  • Desktop: fixed 300 px sidebar + flexible detail panel, side by side.
  • Mobile (≤ 800 px): the layout collapses to a single column and the detail panel slides open directly beneath the tapped item (accordion behaviour).
• SEO‑first — every category, tab and panel is printed in the markup; JavaScript only toggles visibility, it never injects content.
• Elementor‑friendly — the markup and CSS are hardened against the flex/grid containers used by Elementor and similar page builders.
• CSS‑isolated panels — .cfg-panel elements are protected with !important overrides against external styles that may set position: absolute, display: none, box-shadow, z-index or animations on matching class names.
• Self‑contained — no external libraries, no jQuery dependency, scoped CSS classes (cfg-*) to avoid clashing with your theme.

Requirements

Installation

1. Copy the cefegen-service-tabs folder into wp-content/plugins/ (or zip it and upload it via Plugins → Add New → Upload Plugin).
2. Activate CEFEGEN Service Tabs from the Plugins screen.
3. A new Service Tabs menu item appears in the WordPress admin sidebar.

Usage

1. Create a tab group

1. Go to Service Tabs → Nuevo Grupo.
2. Give the group a title.
3. In the ID del grupo (shortcode) box, set a slug — lowercase letters, numbers and hyphens only (e.g. paternidad).
4. Choose a mode:
   • Modo simple (sin categorías) for a flat tab list.
   • Modo multinivel (con categorías) to group tabs under category cards.
5. Add your tabs / categories and fill in the fields (icon, title, price, turnaround, badge, description, feature points, buttons).
6. Publish / Update.

2. Place the shortcode

Drop the shortcode into any post, page, widget or Elementor "Shortcode" element:

[cefegen_tabs id="paternidad"]

The id attribute must match the group slug you configured in step 3.

Shortcode reference

How it works

• A custom post type, cfg_tab_group, stores each tab group. Its content is saved as JSON in the _cfg_group_data post meta field.
• The presence of categories decides the render mode automatically:
  • categories present → multi‑level renderer,
  • no categories → simple renderer.
• Styles are split between an enqueued stylesheet (assets/tabs.css) and a small inline layout block printed by the shortcode, which together drive the flexbox sidebar/panel layout.
• Per‑instance inline JavaScript handles tab switching and the mobile accordion relocation without duplicating any DOM nodes.

Project structure

cefegen-service-tabs/
├── cefegen-service-tabs.php   # Plugin bootstrap: CPT, admin UI, shortcode, renderers
├── assets/
│   └── tabs.css               # Front-end styles (layout, sidebar, panels, responsive)
├── README.md
└── .gitignore

Changelog

2.4.1

• Fixed (hardening): .cfg-panel is now protected with !important overrides for position, top, left, right, box-shadow, z-index and animation. This prevents external CSS (themes, Elementor, or other plugins) from repositioning panels with position: absolute, adding unwanted shadows, or injecting fade animations. .cfg-panel-active and .cfg-panel-hidden also use !important to guarantee visibility control stays with the plugin.

2.4.0

• Fixed (hardening): the sidebar/panel layout is now pinned with inline !important styles directly on the .cfg-wrap, .cfg-sb and .cfg-panels elements. Inline !important is the highest‑precedence rule in CSS, so no theme or Elementor stylesheet (and no cached/minified CSS file) can knock the panel underneath the sidebar. Verified side‑by‑side on desktop and stacked on mobile, even against a hostile display:block !important override.

2.3.0

• Fixed: sidebar and detail panel could stack vertically instead of sitting side by side inside Elementor containers. The layout was rebuilt on a robust flexbox model (fixed‑width sidebar + flexible panel) and assets/tabs.css was aligned with the inline styles to remove the competing float/grid rules.
• Corrected the mobile breakpoint layout.

2.2.0

• Grid‑based layout with Elementor compatibility helpers.
• Multi‑level (category) mode with SEO‑friendly single‑DOM rendering.

License

Released under the GPLv2 (or later) license, consistent with the WordPress plugin guidelines.

Developed for CEFEGEN.