Toggle Push Down Banners From Big To Small

This code enables you to display 2 banners which you can toggle from big to small. In this example, both banners are the same width 1120px however the big banner is 772px in height and the small banner is 320px.

You can use any width or height you like as long as the width is the same for each banner image.

Here’s the demo video which reveals all.

Demo Video

Shows you how the banner can be toggled from big to small. By default, its coded to open with the larger banner.

Tested using the Genesis Sample child theme by StudioPress.

Code Installation

After downloading the zip folder below, follow these installation instructions.

There’s 4 simple steps :

Step 1 : Upload the pushdown.js file to your child themes root directory.

Step 2 : Copy & paste the PHP code from functions.php to the end of your child themes functions.php file.

Step 3 : Copy & paste the CSS from style.css to the end of your child themes style.css file.

Step 4 : Copy over the images from the images folder to your child themes images folder.

Clear caching especially if using Chrome.

Here’s the download zip folder for logged in members: