# V8 to v9 package conversion: tabs

**URL:** https://forums.concretecms.org/t/v8-to-v9-package-conversion-tabs/1414
**Category:** Developing with Concrete
**Created:** [October 31, 2021, 6:12am UTC](https://forums.concretecms.org/t/v8-to-v9-package-conversion-tabs/1414 "2021-10-31T06:12:54Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![linuxoid](https://forums.concretecms.org/user_avatar/forums.concretecms.org/linuxoid/32/5311_2.png) [@linuxoid](https://forums.concretecms.org/u/linuxoid)
#### Post date: [October 31, 2021, 6:12am UTC](https://forums.concretecms.org/t/v8-to-v9-package-conversion-tabs/1414/1 "2021-10-31T06:12:54Z")

</div>

If anyone wants to use tabs in v9, here’s the difference in usage.

in v8:

```
<?php
$tabs = [
    ['tab1', t('Tab 1'), true],
    ['tab2', t('Tab 2')],
    ['tab3', t('Tab 3')],
];

echo $app->make('helper/concrete/ui')->tabs($tabs);
?>

<div id="ccm-tab-content-tab1" class="ccm-tab-content">
</div>
<div id="ccm-tab-content-tab2" class="ccm-tab-content">
</div>
<div id="ccm-tab-content-tab3" class="ccm-tab-content">
</div>

```

in v9:

```
<?php
$tabs = [
    ['tab1', t('Tab 1'), true],
    ['tab2', t('Tab 2')],
    ['tab3', t('Tab 3')],
];

echo $app->make('helper/concrete/ui')->tabs($tabs);
?>

<div class="tab-content">
    <div id="tab1" class="tab-pane <?php echo count($tabs) > 0 ? 'active' : ''; ?>">
    </div>
    <div id="tab2" class="tab-pane">
    </div>
    <div id="tab3" class="tab-pane">
    </div>
</div>

```

If you want to return to the last clicked tab, you can do this:

```
var url = window.location.pathname.toString();
var t = window.sessionStorage.getItem('tab');
var u = window.sessionStorage.getItem('url');

if (t == '') {
    $('ul.nav-tabs li.nav-item:first a').trigger('click');
}
else if (url.includes(u)) {
    $('ul.nav-tabs li.nav-item a').removeClass('active');
    $('.tab-pane').removeClass('active');
    $('ul.nav-tabs li.nav-item a[aria-controls="' + t + '"]').addClass('active');
    $('#' + t).addClass('active');
    $('ul.nav-tabs li.nav-item a[aria-controls="' + t + '"]').trigger('click');
}
else {
    window.sessionStorage.setItem('tab', '');
    window.sessionStorage.setItem('url', '');
    $('ul.nav-tabs li.nav-item:first a').trigger('click');
}

$('ul.nav-tabs li.nav-item a').on('click', function(e) {
    var tab = $(this).attr('aria-controls');
    window.sessionStorage.setItem('tab', tab);
    window.sessionStorage.setItem('url', url);
});

```

Feel free to make it better.

---

<div class="post-metadata">

### Author: ![mandakos](https://forums.concretecms.org/user_avatar/forums.concretecms.org/mandakos/32/3571_2.png) [@mandakos](https://forums.concretecms.org/u/mandakos)
#### Post date: [January 31, 2022, 7:09am UTC](https://forums.concretecms.org/t/v8-to-v9-package-conversion-tabs/1414/2 "2022-01-31T07:09:55Z")

</div>

Hi! Thank you for this guide, it has been helpful.  
What would be the best way to make package or block to support both tabs, for v8 and v9?