Creating filtered pages

Hi there,

I currently have a problem whereby I want to create a landing page which contains all of my projects linked to via tabs. However, I also want to create separate, filtered pages which only show particular project types as tabs. For example, I would show “Web”, “Photography” and “Graphic Design” on the landing page, however when the “Graphics” CTA is clicked it would link through to a separate page which only shows the “Graphics” tabs.

One solution I had thought of which would negate the need for additional pages was “MixItUp”, a plugin which allows you to use CTAs to filter the content on a page. However, I’m keen to have the separate, filtered pages for SEO purposes.

Is there a simple, reliable way of parsing a value across to the separate page when a CTA is clicked to filter the tabs onload? Of course a “quick and dirty way” is to simply copy the code across all other pages and set classes on each type of project and simply set display:none on all other classes… not ideal since it would need to load all content and would counteract the SEO advantage!

If anyone has any suggestions on how this could be achieved or if there is a cleaner way of doing this I’d really appreciate it!

Cheers,

Shoxt3r

Yes, with a server side language. Are you using one?
For example in php you may have:-

<a href="index.php?tab=graphics">Graphics</a>

At the start of the script, use $_GET["tab"] to get the value of tab and show content accordingly.

I don’t think this was what you meant but you could load html into tabs via ajax as shown here.

Hi Sam,

Thanks for your reply. Sorry I wouldn’t have access to server-side scripting, I’m quite limited what I can do - would have to be client-side only (e.g. JavaScript/jQuery).

Cheers,

Andrew

Hi Paul,

Thanks for your reply, sorry for the misunderstanding, that wasn’t what I meant. It would simply be some content blocks (as on the MixItUp website - https://mixitup.kunkalabs.com/).

Cheers,

Andrew

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.