Accordion Tutorials

The tutorials in this archive relate to usage and modification of jQuery accordions in Genesis child themes. You'll find code which helps you add/modify and customize the code used to create and display a accordion. You'll also find more tutorials relating to accordions ( like toggle ) which aren't tagged with accordion by using the search widget in the sidebar. All code as well as support for PHP code is guaranteed for members.

Full Height Vertical Side Push Widget For Left or Right

The code in this download does a number of things : Adds a custom widget area named Side Menu which you can populate with the Nav Menu

Slide In Vertical Nav Menu Widget For Genesis Themes With Fixed Header

This full height vertical widget area pushes the entire site container when opened. The code is an updated version of this tutorial to work

Infinity Pro Vertical Menu

This tutorial shows you how to change the offscreen content feature to a vertical menu using the Infinity Pro child theme by

Add Offscreen Slide In Widget To Infinity Pro Theme

This solution enables you to add a widget area which toggles open using the ion android menu icon in the header. You can modify the code

jQuery Accordion Template With Link To Close Long Items

This accordion includes a HTML link you can add to close any long items like you see in the following screenshot : When the button is

Modify Genesis FAQ Plugin Shortcode Functionality via Child Theme

The code in this download file enables you to modify the entire default shortcode functionality included in the Genesis Simple FAQ

Modify Genesis FAQ Widget

The code in this tutorial enables you to modify all FAQ Widget functionality included in the plugin via any Genesis child theme. The

Off Canvas Push Widget For Side Menu

The code in this tutorial pushes the site container to the right when the side widget is toggled open. The solution includes an animated

Toggle Side Widget Overlay For Slide In & Out Menu

This code adds a custom widget area named Side Menu which can be toggled open/close by clicking the animated menu icon. Here's the demo

Toggle Full Content On Archives Only When Content Contains More Than 1 Paragraph

The code in this tutorial extends the code in this tutorial which enables you to dynamically add a read more / read less button to archive

Toggle Read More Excerpts To Show Full Content On Genesis Archives

This solution enables you to dynamically add a button after the first paragraph on archive pages which slides down to reveal the full

Toggle Read More Button To Show Full Content On Single Posts

This code enables you to add a Read More button which toggles the full content when clicked. When expanded the button text changes to Read

Accordion F.A.Q’s In Columns

You can wrap the HTML for your accordion in column classes if you want to display your F.A.Q questions & answers in 2, 3, 4 & 6 columns like

Genesis Accordion Javascript Template

Most of the accordion solutions already published here for members, use jQuery which is easier to use with WordPress as opposed to

Change Logo On Mobiles When Genesis Responsive Menu Toggled

The code in this tutorial enables you to display a different header image when the responsive hamburger menu icon is toggled open. Here's

Add Accordion F.A.Q’s To After Entry Widget in Genesis

This solution is based on a question from a registered member who wanted to use a tutorial containing code for a f.a.q template, in a widget

Genesis Page Template With Accordion Style Toggle Widget Areas

This page template for Genesis enables you to display collapsible content in widget areas. Once you populate each widget area, simply

jQuery Accordion

This tutorial contains a different version of the Genesis F.A.Q Template With Accordion. This version displays different icons when

Genesis F.A.Q Template With Accordion Style Toggle

This tutorial provides all the code which creates exactly what you see in the following screenshot: The template enables you to