Search code examples
javascriptjquerycsstabsjquery-steps

How to change width of tabs in jQuery Steps Plugin

I am using jQuerySteps Plugin to create tabs. I have four section and thus 4 tabs and they work prefectly fine. But I want each tab to have different percent of width. As of now each of them gets 25%. But I want to manually assign them the width. I can do it by adding CSS class. But since it's a plugin I am not able to find how the <ul> and <li> are getting created and rendered.

Here is how the plugin is setting 25% width.enter image description here

My front end code:

<div id="example-basic">
    <h3>Keyboard</h3>
    <section>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
    </section>
    <h3>Effects</h3>
    <section>
        <p>Wonderful transition effects.</p>
    </section>
    <h3>Pager</h3>
    <section>
        <p>The next and previous buttons help you to navigate through your content.</p>
    </section>
</div>

JS Code

$("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true
});

Question:

How to add id or class so that I can set width of first tab : 20 % second tab:40 % and so on

Solution

  • CSS

    .wizard>.steps>ul>li:nth-child(1){
    width: 20%;
}
.wizard>.steps>ul>li:nth-child(2){
    width: 40%;
}