Tournament Preview Custom Tabs Order | Widgets

Tournament Preview has an option to change the default order of its tabs by passing the tabs property to the SIR function. This option also controls which tabs are enabled.

The tabs property is an array of strings. For example:

plaintext

tabs: { "1": ['overview', 'standings', 'leaders', 'results', 'teams'] }

Here is the list for all sports tabs:

plaintext

1: ['overview', 'standings', 'leaders', 'results', 'teams'], // soccer

For every sport you can:

Re-order tabs by changing the order of strings in the array.
Disable tabs by removing specific strings from the array.

Below is an example code for soccer with the overview tab removed and standings set as the first tab:

#Code

html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            Tournament Preview Tabs Re-order
        </title>
        <style>
            body {
                display: flex;
                justify-content: center;
            }
            .sr-widgets {
                max-width: 620px;
                width: 100%;
            }
            .sr-widget {
                border: rgba(0,0,0,0.12) solid 1px;
                margin-bottom: 24px;
            }
        </style>
    </head>
    <body>
        <script>
            (function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f,
            g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h)
            )})(window,document,"script", "https://widgets.sir.sportradar.com/sportradar/widgetloader", "SIR", {
                language: "en"
            });

            SIR("addWidget",  ".sr-widget-1", "tournament.preview", {
                uniqueTournamentId: 18,
                tabs: {
                    1: ["standings", "leaders", "results", "teams"]
                }
            });
        </script>
        <div class="sr-widgets">
            <div class="sr-widget sr-widget-1"></div>
        </div>
    </body>
</html>

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Tournament Preview Tabs Re-order </title> <style> body { display: flex; justify-content: center; } .sr-widgets { max-width: 620px; width: 100%; } .sr-widget { border: rgba(0,0,0,0.12) solid 1px; margin-bottom: 24px; } </style> </head> <body> <script> (function(a,b,c,d,e,f,g,h,i){a[e]||(i=a[e]=function(){(a[e].q=a[e].q||[]).push(arguments)},i.l=1*new Date,i.o=f, g=b.createElement(c),h=b.getElementsByTagName(c)[0],g.async=1,g.src=d,g.setAttribute("n",e),h.parentNode.insertBefore(g,h) )})(window,document,"script", "https://widgets.sir.sportradar.com/sportradar/widgetloader", "SIR", { language: "en" }); SIR("addWidget", ".sr-widget-1", "tournament.preview", { uniqueTournamentId: 18, tabs: { 1: ["standings", "leaders", "results", "teams"] } }); </script> <div class="sr-widgets"> <div class="sr-widget sr-widget-1"></div> </div> </body> </html>