oneruffryder on "Custom tab shortcode"

Hi, i built the widget to display recent post tags and comments. It looks really well. Now i want from that code to custom it so i can use it for my posts. I dont want to install plugin, as i already styled this one nice.

Now i dont know how to do it, this is a problem. I tried many solutions but my php knowledge is not so good.

This is my html code

<div class="tabs tabs-style-topline">
                <nav>

<ul>
<li><a href="#section-topline-1"><span>Home</span></a></li>
<li><a href="#section-topline-2"><span>Deals</span></a></li>
<li><a href="#section-topline-3"><span>Upload</span></a></li>
<li><a href="#section-topline-4"><span>Work</span></a></li>
<li><a href="#section-topline-5"><span>Settings</span></a></li>
</ul>
                </nav>
                <div class="content-wrap">
                    <section id="section-topline-1"><p>content</p></section>
                    <section id="section-topline-2"><p>content</p></section>
                    <section id="section-topline-3"><p>content</p></section>
                    <section id="section-topline-4"><p>content</p></section>
                    <section id="section-topline-5"><p>content</p></section>
                </div><!-- /content -->
            </div><!-- /tabs -->

Now i have to i guess loop the "li" element and then take index and add it dynamically for numbers 1-x , or i am wrong ? Anyway i know this have to be done in function.php but whatever i tried, it doesnt work.

Inside the code the first -top part is for titles and the second one is for content.

I want it to be like normal tabs shortocode similar to this

[tabgroup]

[tab title="tab1"]Content[/tab]

[tab title="tab2"]Content[/tab]

[tab title="tab3"]Content[/tab]

[/tabgroup]

So, anyone knows how to do it ?

Thanks