jquery define tabs with content

Question

I like to use JQuery for creating tabs. My issue is all jquery tab definitions follow this design.

<div>  
<h4>Heading</h4>  
  <div>  
    <ul>  
     <li><a>Tab 1</a></li>  
     <li><a>Tab 2</a></li>  
     <li><a>Tab 3</a></li>  
    </ul>  
     <div>Content for Tab 1</div>  
     <div>Content for Tab 2</div>  
     <div>Content for Tab 3</div>  
  </div>  
</div>  

However, I need a design like this:

<div>  
  <h4>Heading</h4>  
  <div>  

    <div><a>Tab 1</a></div>
    <div>Content for Tab 1</div>  

    <div><a>Tab 2</a></div>  
    <div>Content for Tab 2</div>  

    <div><a>Tab 3</a></div>  
    <div>Content for Tab 3</div>  

  </div>  
</div>  

Is the above design possible?

Also, I need the tabs to be recognised by css class and not ids (since I create tabs dynamically through code). Is this possible too?

Update: Thanks for all the great minds who helped me, I'm able to establish what I wanted. I have used the inputs from the below posts and improved them for placing multiple tabs in a page.

Find the demo here: http://jsfiddle.net/sunalive/VHPwP/12/

Answer 1

add some classes :-)

<div>  
  <h4>Heading</h4>  
  <div class="parent">  

    <div class="link"><a>Tab 1</a></div>
    <div class="content">Content for Tab 1</div>  

    <div class="link"><a>Tab 2</a></div>  
    <div class="content">Content for Tab 2</div>  

    <div class="link"><a>Tab 3</a></div>  
    <div class="content">Content for Tab 3</div>  

  </div>  
</div>  



$('.link').click(function() {
    $(this).parent().find('.content').hide();
    $(this).next().show();
});

or

$('.link').click(function() {
    $(this).parent().find('.content').hide().end().next().show();
});

Answer 2

See working example here:

http://jsfiddle.net/rathoreahsan/q7Lqq/

HTML CODE:

    <div class="contents-wrapper">  
          <h4>Heading</h4>  
          <div class="tabs-container">  

              <div class="tabs"><a>Tab 1</a></div>
              <div class="contents" style="display:block">Content for Tab 1</div>  

              <div class="tabs"><a>Tab 2</a></div>  
              <div class="contents">Content for Tab 2</div>  

              <div class="tabs"><a>Tab 3</a></div>  
              <div class="contents">Content for Tab 3</div>  

          </div>  
    </div>

JQUERY

    $('.tabs').click(function(){
        $(this).parent().find('.contents').hide();
        $(this).next().show();
    });

CSS

    .contents-wrapper{
        width: 222px;
        font-family: tahoma;
    }

    h4 {
       height: 40px;
       line-height: 40px;
       background: #666;
       color: #fff;
       font-size: 26px;
       padding: 0 15px;
    }

   .tabs-container { position: relative; }

   .tabs {
       float:left;
       background: #ccc;
       height: 30px;
       line-height: 30px;
       padding: 0 16px;
       border-right:1px solid #666;
       border-bottom:1px solid #666;
       cursor: pointer;
    }

    .tabs:hover { background: #f4f4f4; }

    .contents {
       position: absolute;
       margin-top: 31px;
       padding: 15px;
       border: 1px solid #ccc;
       width: 190px;
       font-size: 12px;
       font-weight:bold;
       display: none;
     }

Hope it will be helpful. Thanks!

Answer 3

Below are links for creating tabs dynamically:

http://blog.favrik.com/2009/08/11/dynamically-adding-jquery-tabs-round2/

http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx