Affordable jQuery semantic tab plugin

Question

Just a quick question, does anyone know about any jquery tab plugins that work based on a similar structure:

<div class="tabs">
    <div>
        <h4>Tab one</h4>
        <p>Lorem Ipsum</p>
    </div>

    <div>
        <h4>Tab two</h4>
        <p>Lorem Ipsum</p>
    </div>
</div>

Where does the plugin capture the tab title from h4s? I can only find plugins that use structure:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

I guess the only way to use these plugins is to grab the headers, delete them, add them to the list at the top of the html and then run the plugin based on this? I'm just asking how I'm completely new to jQuery, so I'm not sure how I would do this, and just wondered if there was already an existing plugin that everyone knew about.

If not, do not worry, I will have to deal with documents and give him pleasure!

Greetings

Answer 1

- , html , jQuery. , - - !

$(document).ready(function() {
     $.fn.reverse = [].reverse; //Set the reverse function
    $('#tabs div h4').reverse().prependTo('#tabs'); //Grab the headings and reverse them, then prepend to outer div
    $('#tabs h4').wrap('<li></li>'); //wrap each heading in an li
    $('#tabs > li').wrapAll('<ul class="tabheadings"></ul>'); //wrap all li in ul
    $('#tabs ul li h4').each(function(){
      $(this).replaceWith('<a>' + $(this).text() + '</a>'); //for each heading replace with an anchor but keep innards
   });
    $('#tabs div.in_content_box').each(function(i){
       $( this ).attr('id', 'tabs-' + (i+1)); //for each div add an id with an incremental number
    });
    $('#tabs ul li a').each(function(i){
        $( this ).attr('href', '#tabs-' + (i+1)); //match the href on the anchor with the id above
     });



});

Answer 2

jQuery , , div.