In the comments section of my tutorial titled Adding a horizontal opt-in form in Genesis, a reader asked:
Got this form to work perfectly!
Only question is finding a way for people to collapse it if they’re already subscribed or just want to hide it on the screen. I want it to show up by default, otherwise I’d add a collapse-o-matic code or something.
Thank you!
In this article I share how we can use jQuery's slideToggle to let users collapse and expand the opt-in form below header on front page in Genesis.
Screenshots:
Opened (Default state):
Closed:
Screencast:
This tutorial uses Lifestyle Pro and should work in any Genesis theme with minor changes.
Step 1
Install and activate Genesis eNews Extended plugin.
Step 2
Create a file named say, home.js in child theme's js directory (create, if not existing) having the following:
This is great stuff Sridhar, I love it!
Thanks for sharing
How do I make the default state to be closed?
Thanks in advance
This worked fabulously. A note: if you did it the previous way already without the .js addition, it’s best to totally remove all of the old code before implementing this, as there have been changes to the code. It was easy enough to copy and paste my old stylesheet css from the prior implementation into the new one and delete the old css. I will try to remember to post the website address when it’s out of development so you can see it in action.
This was really useful! Of course, you need to understand some coding so it is not for beginners. But thanks for the simple tutorial!
First I’d like to thank you for all the awesome tutorials!
Question – I’m implementing a horizontal opt-in on my new site but I’d like for it to be collapsible ONLY on mobile (primarily phones – kind of like mobile menus) since it takes up a lot of room when not collapsible when viewed on mobile. How would I go about doing that?
Here you go: http://sridharkatakam.com/using-mobble-to-set-up-collapsible-horizontal-opt-in-form-on-mobiles-in-genesis/