I was trying to build a modal window in bootstrap with 2 tabs. Each tab will be fired by different buttons in the main HTML.

The problems are,

  1. bootstrap doesn’t render the non-visible tab
  2. the modal window retains its last seen state

So for eg, lets say you are building a checkout page and want to give the user options of both discount and partial payment.

You give 2 buttons in HTML, 1 each for discount and for partial payment.

On clicking the buttons, a modal window opens with 2 tabs discount and partial payment. If the user clicked on discount button, he sees discount tab and if he clicked on partial payment button, the partial payment tab shows with its content rendered. Bootstrap by default doesnt support this. If the user clicked on discount button the discount tab will display and if the user clicks on partial payment then the content will not be rendered. Same repeats when partial payment button is clicked.

So, used a bit of JS to make this work. Sharing the code below, for the benefit of everyone:


Previous articleNegative Space
Next articleWhy I started coding
My name is Talvinder Singh, I build internet products. I am a philomath, a seeker of knowledge. I am an award winning 30 year old internet professional from India who designs, develops, consults, speaks and writes about building high quality, accessible internet products.


Please enter your comment!
Please enter your name here