In a simple website that I finished working on today, I have set up a custom widget area called "Essential Info" populated with three text widgets appearing in columns (using Flexbox) displayed above the site header.
Clicking/tapping on a CLOSE button at the top right of the browser window will collapse (slide toggle) the widget area and the button text will change to OPEN. Clicking/tapping on the OPEN button expands the widget area.
Step 1
Add the following in child theme's functions.php:
Really nice. It would be helpful to have a cookie to remember that the user closed the widget.
Can be done.
Ex.: https://sridharkatakam.com/bottom-slide-section-genesis-js-cookie/
This is really cool!
I love the concept but can’t get the widget to collapse even after loading general.js. Any ideas?
Here’s the URL I’m testing it on: http://www.stoverchiropractic.com/
Check whether you have uploaded general.js in the right location or not. It should be in child theme’s
jsdirectory.http://www.stoverchiropractic.com/wp-content/themes/kristie/js/general.js shows page not found.
Ah, gotcha!
The child theme I’m using didn’t have a js directory separate from the lib directory. After creating the js directory, it works like a charm. Thank you!
And thanks for your quick reply!! Your tutorials are always beneficial.
Hmm. After messing with it further, how do you get the OPEN tab to overlap the Header section? On the site I referenced, the OPEN tab disappears when one clicks the CLOSE tab.
Your
.site-headerhas a z-index of 200. So you need to set that of.closeto higher than that, say 201 to make it visible.I gave your suggestion a try but no go. I even increased the z-index of .close to 300 but still no change (even after emptying the cache, refreshing the browser, etc…). Strange!
I still see it having a z-index of only 1 in http://www.stoverchiropractic.com/wp-content/themes/kristie/style.css.
http://d.pr/i/gbiX
I’ve changed it within the File Editor as well as via FTP. Previewing it via both File Editor and FTP file shows 201 but your link shows 1. Maybe the server cache needs to be refreshed.
Just to follow up… I put Chrome into incognito mode and now it’s working just like your demo. Thanks again for all you do. Especially for taking time to reply to this issue. You and your tutorials are greatly appreciated!
You are welcome.
Great tutorial Sridhar! How can do this the other way round. That is when the page is loaded the widget is collapsed by default and you need to press Open button to see the content. Thanks!
You can trigger a click upon page load to achieve this.
[js]$(‘.close’).trigger(‘click’);[/js]
Screenshot: http://d.pr/i/FWio
Thanks Sridhar!