Demo jqxTabs

by jmeile

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxtabs.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.fluent.css">
Something should go here, before starting the navigation to stick on the
top
<br/><br/><br/><br/><br/><br/>
<div id='jqxTabs'>
    <ul style='margin-left: 20px;'>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>M</li>
        <li>N</li>
        <li>O</li>
        <li>P</li>
        <li>Q</li>
        <li>R</li>
        <li>S</li>
        <li>T</li>
        <li>U</li>
        <li>V</li>
        <li>W</li>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
    </ul>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

JavaScript

window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');

$(document).ready(function () {
  $('#jqxTabs').jqxTabs({
    width: '100%',
    theme: 'fluent',
    scrollPosition: 'both',
    /* Avoid expanding/collapsing tabs on click */
    collapsible: false,
  });
  /* I'm going to use this widget to something that it wasn't desinged
     for: I want to have on the titles links to anchors on the document.
     I don't really need a content in the tabs, so, I colapse them, then
     set the attributes: padding, height, and border to zero. Just setting
     the height to zero won't work. Please note that the jqxTabs widget
     also have a height attribute, but it is for the whole widget and not
     just the content
  */
  $('#jqxTabs').jqxTabs('collapse');
  $('.jqx-tabs-content').css('padding',0);
  $('.jqx-tabs-content').height(0);
  $('.jqx-tabs-content').css('border',0);
});