Tab href & tab content ID's get dots added and break the tabs

[emRae]

Hello,

We recently noticed an issue today with the code that is generated for the tabs. For some reason a dot is being added to the tab href and the tab content ID and is breaking the functionality of the tabs. Below is a sample of the output when testing creating two tabs:

[bs_tabs]
[bs_thead]
[bs_tab class="active" type="tab" href="#bs_first_tab27" title="Tab 1"]
[bs_tab class="" type="tab" href="#bs_tab24439.9127" title="Tab 2"]
[/bs_thead][bs_tcontents]
[bs_tcontent class="active" id="bs_first_tab27"]Tab 1 Content[/bs_tcontent]
[bs_tcontent class="" id="bs_tab24439.9127"]Tab 2 content[/bs_tcontent]
[/bs_tcontents]
[/bs_tabs]

You can see the added dot on "Tab 2" and also it adds a few numbers after them as well.

Thank you for taking a look into the issue!

[No3x]

Hi @emRae,

I fixed this in the referenced PR. It looks like you are familiar with git - It would be great if you could checkout this commit and give it a try before we are going to merge this.

[emRae]

Hi @No3x,

I'd like to checkout your commit and try it out but I don't know how. I'm still fairly new to GIT forking. What I have done is created a fork of the bootstrap shortcodes plugin here.

I was making changes directly in that fork. Now I realize I should have been creating feature branches.

Now, I've also copied down your forked version of the boostrap shortcodes plugin.

Can you point me in the right direction to learn how to checkout your commit and try it out? I can't seem to find any articles that show me how to do this.

[No3x]

Hi @emRae,
don't worry! You don't need to fork the repo unless you want to work on an own feature and merge it to the plugin via a pull request. That's actually what I did. This process is illustrated in a nice way on this page.

There are multiple ways you can test this fix. The simplest one is the following:
Checkout the particular pull request. There is a help page for this too.

So basically:

git clone https://github.com/TheWebShop/bootstrap-shortcodes

Fetch the pull request

git fetch origin pull/69/head:69

Checkout this branch

git checkout 69

Your favourite git-gui-client can do this without all of this commands. I like to use gitkraken because you can see all of your actions in the graph. Through this you get a better understanding about what you actually doing.

[emRae]

@No3x, thanks for connecting the dots for me! I fetched the changes and it works great for me. My only suggestion is to add an underscore after 'bs_tab' for the id. So, var id = 'bs_tab_' + guid();. I added this comment in your pull request. This is only to make the ID visually easier to read.

[No3x]

Hi @emRae,
I applied your suggestion. You can pull that change too and test it again to see if it did not break anythink else if you like.
Just let me know if there is anything else you would like to know about git/github.