Are you looking for a plugin that lets you do something like that, or do you wish to develop your own solution and just need to be pointed in the right direction? This is the Developing WordPress forum after all.
If you look at the source HTML and CSS of the page, you should see all the different contents are all part of the page. Their CSS styling causes each one to occupy the same position on the page. All but one is assigned a class that has a display: none; CSS property associated with it, so all but one are invisible.
When one clicks on the various options, a bit of JavaScript listening for a click event will remove the class from the chosen content, making it visible. It’ll also assign the class to all the other contents to ensure they are all invisible.
It’s the same mechanism used for tabbed pages, except it is only applied to a particular section and the “tabs” (the options) are not styled to look like literal tabs. If you do some searching, there are all sorts of tutorials on creating tabbed pages.
Hi,
Thanks for the reply. Was looking at either plugin or a steer in the right direction for code.
The code side is a little bit new to me and still learning that side so picking bits up.
Thanks
A plugin search for “tabbed pages” doesn’t yield much that looks promising. Still, looking at the tabbed page source HTML and CSS from the few plugins that actually do tabbed pages might help in further understanding. But I think the generic tutorials you can find through a general internet search would be more helpful. It’s just that you’d apply the concept to a specific section instead of the entire page.
The only problem with generic tutorials is you’d need to adapt the code suggestions to accommodate some WordPress quirks. Mainly that external JS and CSS file references are not placed directly in HTML content. They are instead enqueued through PHP code. In the end the results are the same.
. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
