How to change width of tabs in jQuery Steps Plugin

css, javascript, jquery, jquery-steps, tabs

Solution

CSS

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

Problem

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. 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`

Original source