Joomla 3.9.10

I am using this template. I would like to create a link on my home page that when clicked, will take the user to the portfolio page and display a pre-selected tab..

For example my link would be 'Branding Portfolio', when clicked this should go to http://demo2.joomshaper.com/2019/indigo/index.php/portfolio and the 'Branding' tab should be pre-selected, and the items already filtered.

Is this possible?

I've spoken with the developers JOomshaper but they've said it required additional development and they don't offer / support that.

I'm thinking I could somehow use and anchor and jquery?

Any advice is appreciated.

  • After having a look on the html code, I agree with the developer. Your request will need some codebase changes on how the tab is accessed, so the url can something like : demo2.joomshaper.com/2019/indigo/index.php/portfolio#Branding
    – webchun
    Commented Aug 7, 2019 at 12:33
  • thanks @webchun I'm here hoping someone can help me with those custom changes :)
    – jonboy
    Commented Aug 9, 2019 at 8:59

2 Answers 2


By "anchor and jquery" you mean like the way bootstrap tabs work - ie. by letting the uri's fragment hit the id of the tab. But these tabs aren't set up like that. You can of course use jquery to trigger a click on the tab you want (via the fragment if that is useful) but that will trigger the animation that goes along with it. If you don't care about that then the following js might do...

Example link with a fragment: http://demo2.joomshaper.com/2019/indigo/index.php/portfolio#branding

Example script to run after everything else has run:

var hash = location.hash.replace('#', '');
jQuery('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');
  • Thanks @jamesgarrett this sounds promising, but I tried it and it didn't work. I added your script to the 'custom js' section of the template settings, this loads after all other scripts. Then I visited my url example.com/portfolio#city-one but nothing happens. I have checked the data-group value of the tab and it is data-group='city-one' Am I doing this correctly?
    – jonboy
    Commented Aug 9, 2019 at 8:55

I found the answer, thanks for the help @jamesgarrett

The tabs were using shuffle.js so I needed to edit the page builder js file.

jQuery(function($) {

    var $container = $('.sp-simpleportfolio-items');

    $(window).load(function() {
        var $sizer = $container.find('.shuffle__sizer');

            itemSelector: '.sp-simpleportfolio-item',
            sequentialFadeDelay: 150,
            sizer: $sizer

        // ADD - get the url hash
        var hash = location.hash.replace('#', '');
        // ADD - shuffle based on the hash
        $container.shuffle( 'shuffle', hash );
        // ADD - highlight the tab
        $('.sp-simpleportfolio-filter li[data-group="' + hash + '"] a').trigger('click');



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.